javascript - 如何通过 Jquery 动态删除表中的记录

Question

我有一个动态创建的 html 表格。

以下 jQuery 代码捕获用户在该表中选择的 tr，并使用已选择的行中的特定数据填充另一个名为“selected_users”的表。

$('#available_users tbody').on('click', 'tr', function () {
    var id = this.id;
    var tr;
    tr=$('<tr/>');

    var index = $.inArray(id, selected);
    if ( index === -1 ) {
        selected.push( id );

        var tds = $(this).find('td');
        tr.append("<td>" + tds.eq(1).text() + "</td>");
        tr.append("<td>" + tds.eq(3).text() + "</td>");
        $('#selected_users').append(tr);
    } else {
        selected.splice( index, 1 );
    }

    $(this).toggleClass('selected');
} );

问题

这个逻辑是有效的。但是现在我需要做的是，当用户从 available_users 表中取消选择以前选择的记录时，我需要将其从“selected_users”表中删除。

到目前为止我尝试了什么:

我尝试做的第一件事是为 <TR> 分配一个 ID我在“selected_users”表中创建的，这样我就可以使用这个 id 来找到我想删除的行。我试图将我的代码更改为如下所示:

    var index = $.inArray(id, selected);
    if ( index === -1 ) {
        selected.push( id );

        var tds = $(this).find('td');
        tr.append("<td>" + tds.eq(1).text() + "</td>");
        tr.append("<td>" + tds.eq(3).text() + "</td>");
        tr.attr('id') = id.substring(4);  //******* NEW ********
        $('#selected_users').append(tr);

但它会报错“ReferenceError: invalid assignment left-hand side”。另一个问题是如何从 selected_users 表中删除。我想把逻辑放在 else 路径中......

    } else {
        selected.splice( index, 1 );
         //*** add logic to remove also from the selected_users table.
    }

谢谢。

编辑 1

除了尝试将 ID 属性动态分配给新的 <TR> 之外，我在此处发布的所有代码均有效。我在补充。我认为在这种情况下，所有细节可能会使事情变得更加复杂???

如果我只是问如何做这样的事情，也许它会简化事情:

var tr;
tr.append("<td>value1</td>");
$('#test_table').append(tr);

当做类似上面的事情时，你如何将“id=123”的 id 分配给 <tr> ？

此外，如果您只有行 ID (<tr id=123>)，您如何从 test_table 中删除整行？

Answer 1

首先，我假设这是“bombs with an error ReferenceError: invalid assignment left-hand side ”的行:

tr.attr('id') = id.substring(4);

我做出这个假设是因为 attr('id')将返回一个不可变的字符串，并且您正在尝试为该现有字符串分配一个新字符串(id.substring(4))。

如果您希望为 id 设置一个新值你需要使用 attr() 的 setter 形式方法:

tr.attr('id', id.substring(4))`

或者，假设子串取自当前的 id :

tr.attr('id', function (index, currentProperyValue) {
    return currentPropertyValue.substring(4);
});

上面的参数名称是用户定义的，第一个参数(上面:'index')是tr中集合返回的当前元素的索引。多变的;第二个(上面:'currentPropertyValue')表示我们正在使用该方法更改的属性的当前值。

…if you only had the row id (<tr id=123>), how could you delete the entire row from test_table?

简单地说，使用 jQuery:

$('#123').remove();

这将从文档中删除该元素(无论该元素出现在文档中的什么位置，请记住重复的 id 是无效的，因此如果两个元素以相同的 id 出现，则只有 第一个元素id 将被删除)。

或者，但仍然很简单，使用纯 JavaScript；这里我们使用了一个变量，因为我们需要两次获取相同的元素:

var elem = document.getElementById('123');

elem.parentNode.removeChild(elem);

引用资料:

• JavaScript:
  • > document.getElementById() .
  • > Node.parentNode .
  • > Node.removeChild() .
  • > String .
  • > String.prototype.substring() .
• jQuery:
  • > attr() .
  • > remove() .