Question

当用户在“其他”文本框中输入内容时，我需要为HTML添加新内容。

我正在使用以下HTML，JavaScript和CSS代码

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?
    }
});

当用户按下“其他”下的内容时，我需要添加新项目。例如：如果用户输入“Cricket”，则需要添加带有板球的新行，并且应删除OTHER。

Answer 1

使用last()和after()在最后一行后附加一个新行：

var new_cell_name = $('#your_other_input_field').val();
$('.table-row').last().after('<tr class="table_row">'
    + '<td class="table-cell">' + new_cell_name + '</td>'
    + '<td class="table-cell"><input type="text" name="yes"></td>'
    + '</tr>');

注意：您应该将文本框的名称更改为唯一名称，或使用name="yes[]"之类的数组来避免命名冲突。

修改

注意到您想删除另一行并添加新行，因此请改用replaceWith()：

$('.table-row').last().replaceWith('

<强>文档：

Answer 2

您可以添加如下行：

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

您可以通过以下方式检查文本框是否包含文本或为空：

var inp = $("#txt");
// where #txt is the id of the textbox

if (inp.val().length > 0) {
    // do something
}

您可以通过以下方式检测键盘上的enter：

$(".table-cell-text").keyup(function (event) {
    if (event.keyCode == 13) {
          alert('You pressed enter');
    }

});

结合这些，你得到这样的东西：

的jQuery

var inp = $("#txt");
// where #txt is the id of the textbox

$(".table-cell-text").keyup(function (event) {
    if (event.keyCode == 13) {
        if (inp.val().length > 0) {
          $('#myTable tr:last').before('<tr class="table-row"><td class="table-cell">' + inp.val() + '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td></tr>');
        }
    }

});

将HTML中的<table>更改为<table id="myTable">

HTML

<table id="myTable">
    <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-text">
        <input type="text" name="yes" id="txt">
        </td>

    </tr>
</table>

我还没有运行代码，所以要小心任何错别字。希望能帮到你。

您可以找到jsFiddle HERE。

如果您希望“其他”tr消失，可以使用.replaceWith()代替.before()

Answer 3

$(".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向表中添加新行

3 个答案:

的jQuery

HTML