从表中获取索引（tr 没有 ID）答案

【问题标题】：Get index from table (the tr has no ID)从表中获取索引（tr 没有 ID）
【发布时间】：2011-08-14 03:01:34
【问题描述】：

我正在使用以下代码动态创建并附加到表中，<tr> 和 <td>：

$("#table1").append(
        '<tr>'+
        '<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'</td>'+
                    '</tr>');

到目前为止一切正常：我可以将 Td 数据加载到我想要的其他字段中，并且创建它没有问题。

但除了创建它之外，我还必须允许用户动态删除<td>，但正如您所见，没有要查找的 ID。允许用户删除<td> 的更好方法是什么？

我正在尝试以下代码：

$("#table1>tbody>td>tr."+teste+"").remove();

但是没有成功！测试变量是我为寄存器自动定义的一个数字。

有什么帮助吗？

【问题讨论】：

您不能在要附加的内容中添加 id 属性吗？除非有一些唯一标识符或者它始终保持相同的顺序，否则没有任何方法可以定位特定元素。但是，如果您始终知道它将是一行中的第一个单元格，则可以使用 .index() 或 .eq()
TR 在 TD 之前出现，这可能是你的问题。但是，如果您有多个表格单元格，那么您将遇到该代码的问题。
@MarcySutton 嗨，Marcy，不幸的是，我无法在追加中添加 Id，因为他们会收到另一个计数器，由另一个函数传输。我在这里有一个计数器，如果我可以通过使用该选择器来选择 TR，那就太好了，但我只是不知道该怎么做，我尝试了很多方法但没有成功。 假设我们有一个名为“USERID”的计数器，我应该如何使用该值来获得所需的 TR？
用户如何触发删除？
@kingjiv 用户从列表中选择项目，然后将其加载到所需的字段中，然后用户可以选择删除它。 @MarcySutton Marcy，我必须计算 TD。我按照你的提示，关于在 TD 之前出现的 TR，这可能是一个拼写错误，但仍然无法让它工作。我的计数器实际上是一个隐藏字段，它的值根据“用户列表”（表格）中选择的TD而变化。

标签： javascript jquery dom dynamic html-table

【解决方案1】：

在动态创建每个单元格时设置唯一的 id 属性。

<tr id="uniqueID"><td>Cell Content</td></tr>

然后使用简单的 jquery 按 id 删除行。

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

【讨论】：

我试过了，但我不能让它工作，因为我有一个数组，每次用户添加/删除一个元素时都必须更新它。实际上它有效，但如果我删除表格的第一个元素，我无法访问其他元素。

【解决方案2】：

您可以在每个驱动程序名称旁边添加一个小 x，通过稍微更改代码来删除该 td：

$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'<span onclick="$(this.parentNode).remove()">x</span></td>'+'</tr>');

或者您可以将另一个函数添加到您绑定到每个<td> 的单击处理程序中，这将在预定义的<div> 中显示一条消息，询问用户是否要删除该元素：

$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);askDelete(this);">'+$("#DRVR_NAME").val()+'</td>'+'</tr>');

然后在您的 HTML 中的某处定义一个消息区域 (id = 'messageArea')，并在您的代码中定义以下函数：

askDelete(el){
    var MA=$('#messageArea');
    MA.empty();
    MA.html('Do you want to delete ' + el.innerHTML + '?<br>').append('<span id="confirmDelete">delete</span>&nbsp;<span id="cancelDelete">cancel</span>')
    MA.find('#confirmDelete').click(function(){$(el).remove();});
    MA.find('#cancelDelete').click(function(){MA.empty();})
}

然后根据需要设置删除和取消按钮的样式。

【讨论】：

【解决方案3】：

如果 test 是您要删除的行的从 0 开始的索引...

$("#table1>tbody>tr:eq("+test+")").remove();

【讨论】：

Brandom，它有效，但它从零开始删除，那是一个文本！我可以从 n 开始吗？ 2?
是的，当然，只需使用(test+2) 而不是上面的test。
布兰登，效果很好！！感谢您的帮助，我无法想象这是如此简单......最简单的解决方案是最难找到的！再次非常感谢！ :)
如果 Brandon 解决了问题，您应该通过单击其答案左侧的复选标记将他的答案标记为“已接受”。 =)
@Armando Freire - 我很高兴它成功了。您自己非常接近解决方案，只需要轻推一下。

【解决方案4】：

您的删除代码假定 TD 上有一个类。您必须通过引用隐藏字段中的值来使用 :eq() 来定位它。如果隐藏字段中的值是一个数字（用户选择的 td 的索引 = 您的计数器），您可以尝试这样的操作：

var hiddenFieldValue = $('input.hiddenFieldClassName').val();

$("#table1>tbody>tr>td:eq("+hiddenFieldValue+")").remove();

【讨论】：