使用jQuery从表中删除行

时间:2013-10-28 21:10:26

标签: jquery internet-explorer-8

我需要删除一些行,每行都与表中的复选框相关联。到目前为止,我已经想出了这个:

$("#RemoveSelectedTests").click(function () {
    var testElements = [], len, rowToRemove;
    testElements = getSelectedTests('what', "selectedTests");
    len = testElements.length;

    for (var i = 0; i < len; i++) {
        rowToRemove = testElements[i].substring(testElements[i].lastIndexOf("(") + 1, testElements[i].lastIndexOf(")"));
        $("#" + rowToRemove).remove();
    }
});

对我而言,上述情况似乎是正确的,但似乎有点不一致。我的意思是,有时候,它会正确地删除行,其他时候,需要多次按下删除按钮才能删除行。我不确定这里还有什么。我可能做错了什么?

getSelectedTests只获取要处理的行。

function getSelectedTests(what, id) {
    var selectedTests = [];
    $("#" + id + " .rdbtn[type=checkbox]:checked").each(function () {
        if (!what) {
            selectedTests.push($(this).val());
        }
        else {
            selectedTests.push($(this).data('desc') + ' (' + $(this).val() + ')');
        }
    });
    return selectedTests;

1 个答案:

答案 0 :(得分:1)

我相信你可以做得更简单一些。

$(function () {
    $("#removeSelectedTests").click(function () {
        $(".rdbtn[type=checkbox]:checked").each(function() {
            $(this).parents("tr").remove();
        });
    });
});

<table>
  <tr>
    <td><input type="checkbox" class="rdbtn" value=1></td>
    <td>Test 1</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="rdbtn" value=2></td>
    <td>Test 2</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="rdbtn" value=3></td>
    <td>Test 3</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="rdbtn" value=4></td>
    <td>Test 4</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="rdbtn" value=5></td>
    <td>Test 5</td>
  </tr>
</table>
<button id="removeSelectedTests">Remove Tests</button>