Question

我试图从表中删除行但不知何故不起作用。请告诉我如何解决这个问题？

这是我的html with table and javascript：

<tbody class="items">
    <tr>
        <td> Data 1 </td>
        <td> Data 2 </td>
    </tr>
</tbody>

<tbody id="test">
    <tr>
        <td> </td>
        <td> </td>
    </tr>
</tbody>

$(".items tr").click(function() {
    var value = parseInt($.trim(tableData[1]));
    $("#test").append(
        "<tr><td><input name='sm_invnumber[]' value='" + 
        $.trim(tableData[0]) + 
        "' style='width: 170px;' readonly ></td><td><input name='sm_amount[]' value='" +          
        $.trim(tableData[1]) + 
        "' style='width: 170px; text-align: right;' readonly ></td><td><span onclick='deleteRow(value, this)'> x </span> </td></tr>");
});

function deleteRow(value, row) {
    var i = row.parentNode.parentNode.rowIndex;
    document.getElementById('#test').deleteRow(i);
}

以下是我正在使用的说明：通过单击表（class = items）并将它们放入表（id = test）来挑选数据。有一个'X'的功能。我想删除这一行。

非常感谢帮助。

Answer 1

你似乎让自己的生活变得非常困难。为什么不简单地将一个类添加到具有十字的单元格中，并使用jQuery删除其包含的行。例如：

<table>
  <tbody id="test">
    <tr><td>Data 1</td><td class="delete">x</td></tr>
    <tr><td>Data 2</td><td class="delete">x</td></tr>
    <tr><td>Data 3</td><td class="delete">x</td></tr>
  </tbody>
</table>

$('.delete').click(function () {
  $(this).parent().remove();
});

Fiddle

Answer 2

试试这个

function deleteRow(value, span)
{
    $(span).closest("tr").remove();
 }

或

function deleteRow(value, span)
{
     var i=row.parentNode.parentNode.rowIndex;
     $(document.getElementById('test')).children(":eq("+i+")").remove();
 }

Answer 3

很少有问题，请尝试

jQuery(function () {
    var tableData = [1, 'test'];
    $(".items tr").click(function () {
        var value = parseInt($.trim(tableData[1]));
        $("#test").append(
            "<tr><td><input name='sm_invnumber[]' value='" + $.trim(tableData[0]) + "' style='width: 170px;' readonly ></td><td><input name='sm_amount[]' value='" + $.trim(tableData[1]) + "' style='width: 170px; text-align: right;' readonly ></td><td><span onclick='deleteRow(\"" + value + "\",this)'> x </span> </td></tr>");
    });
})

function deleteRow(value, row) {
    $(row).closest('tr').remove();
}

演示：Fiddle，another version

在JavaScript中删除功能

3 个答案: