使用jQuery在输入键按钮上向表中添加新行 [英] Add new row to table using jQuery on enter key button

问题描述

我需要在用户在其他文本框中输入内容时向HTML添加新的内容。

我使用下面的HTML，JavaScript和CSS代码

HTML：

 < table> 
< tr class =table-header> 
< td class =table-cell>游戏< / td> 
< td class =table-cell>是< / td> 
< td class =table-cell>否< / td> 
< / tr> 
< tr class =table-row> 
< td class =table-cell> 
 FootBall 
< / td> 
< td class =table-cell> 
< input type =radioname =yes> 
< / td> 
< td class =table-cell> 
< input type =radioname =yes> 
< / td> 
< / tr> 
< tr class =table-row> 
< td class =table-cell> 
冰球
< / td> 
< td class =table-cell> 
< input type =radioname =yes> 
< / td> 
< td class =table-cell> 
< input type =radioname =yes> 
< / td> 
< / tr> 
< tr class =table-row> 
< td class =table-cell> 
其他
< / td> 
< td class =table-cell> 
< input type =textname =yes> 
< / td> 
 
< / tr> 
< / table> 
  

CSS：

  .table-header {
 background-color：green; 
} 
 .table-cell {
 
 width：100px; 
 height：20px; 
 
  

JavaScript：

  $（。table-cell-text）。keyup（function（event）{
 if（event.keyCode == 13）{
 // what我是否在这里添加一个新行？
} 
}）; 
  

当用户在其他下按下某些东西时，我需要添加新项目。例如：如果用户输入Cricket，则需要添加板球的新行，并删除OTHER。 $（。table-cell-text）。keyup（function（event）{
if（event.keyCode == 13）{
$（this）.closest（ 'tr'）。replaceWith（'< tr class =table-row>'+
'< td class =table-cell>'+ this.value +'< / td> ;'+
'< td class =table-cell>'+
'< input type =radioname =yes/>'+
' < / td>'+
'< td class =table-cell>'+
'< input type =radioname =yes/>'+
'< / td>< / tr>'）;
}
}）;


FIDDLE

I need to add a new to the HTML when the user enters something in the "Other" text box.

I'm using the below HTML, JavaScript and CSS code

HTML:

<table>
    <tr class="table-header">
        <td class ="table-cell">Game</td>
        <td class ="table-cell">Yes </td>
        <td class ="table-cell">No</td>
    </tr>
    <tr class="table-row">
        <td class ="table-cell">
        FootBall
        </td>
        <td class ="table-cell">
        <input type="radio" name="yes">
        </td>
        <td class ="table-cell">
        <input type="radio" name="yes">
        </td>
    </tr>
    <tr class="table-row">
        <td class ="table-cell">
        Hockey
        </td>
        <td class ="table-cell">
        <input type="radio" name="yes">
        </td>
        <td class ="table-cell">
        <input type="radio" name="yes">
        </td>
    </tr>
    <tr class="table-row">
        <td class ="table-cell">
        Other
        </td>
        <td class ="table-cell">
        <input type="text" name="yes">
        </td>

    </tr>
</table>

CSS:

.table-header{
    background-color:green;
}
.table-cell{

    width:100px;
    height:20px;
}

JavaScript:

$(".table-cell-text").keyup(function(event){
    if(event.keyCode == 13){
        //what do I put in here to add a new row?
    }
});

When a user presses something under "Other", I need add the new item..For example: If the user enters "Cricket" a new row with cricket needs to be added and OTHER should be removed.

解决方案

$(".table-cell-text").keyup(function (event) {
    if (event.keyCode == 13) {
        $(this).closest('tr').replaceWith('<tr class="table-row">'+
            '<td class="table-cell">' + this.value + '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td></tr>');
    }
});

FIDDLE

这篇关于使用jQuery在输入键按钮上向表中添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！