设置动态创建的 tr 标签的 id答案

【问题标题】：Set the id of a dynamically created tr tag设置动态创建的 tr 标签的 id
【发布时间】：2021-09-21 16:36:42
【问题描述】：

我有一个表和正在动态创建到该表中的行，如下所示：

 $("body").on("click","#addRow",function(ev){
    
    var newRow = "<tr class='tabrow editing'>"
        +"<th><div></div><div><input type='text' class='form-control' value=''/></div></th>"
        // +"<td><div>A"+len+"</div><div><input type='text' value='A"+len+"'/></div></td>"
        +"<th><div><button class='editRow ' type='button'>Edit</button></div><div><button class='deleteRow ' type='button'>Delete</button></div><div><button class='saveRow' type='button'>Save</button></div></th>"
        +"</tr>";

    
    $(newRow).appendTo("#data_table tbody");

});

如何在开头添加一个 id？

我试过了

        $(newRow).find('tr').attr('id' , 'row' + someNumber);

【问题讨论】：

$(newRow).attr('id' , 'row' + someNumber); 因为该行本身没有descendant。
离题：添加自动生成的 ID 是一种反模式。你可能根本不需要它。

标签： javascript jquery attr

【解决方案1】：

请与"<tr class='tabrow editing'>" 一起添加，例如"<tr id="+id+" class='tabrow editing'>"，而不是使用 $(newRow).find('tr').attr('id' , 'row' + someNumber);

【讨论】：

【解决方案2】：

你可以像这样添加id

$("body").on("click","#addRow",function(ev){

var newRow = "<tr class='tabrow editing' id='row"+someNumber+"'>"
    +"<th><div></div><div><input type='text' class='form-control' value=''/></div></th>"
    // +"<td><div>A"+len+"</div><div><input type='text' value='A"+len+"'/></div></td>"
    +"<th><div><button class='editRow ' type='button'>Edit</button></div><div><button class='deleteRow ' type='button'>Delete</button></div><div><button class='saveRow' type='button'>Save</button></div></th>"
    +"</tr>";


$(newRow).appendTo("#data_table tbody");

});

或像这样（如@Lain 的评论）

$("body").on("click","#addRow",function(ev){

var newRow = "<tr class='tabrow editing'>"
    +"<th><div></div><div><input type='text' class='form-control' value=''/></div></th>"
    // +"<td><div>A"+len+"</div><div><input type='text' value='A"+len+"'/></div></td>"
    +"<th><div><button class='editRow ' type='button'>Edit</button></div><div><button class='deleteRow ' type='button'>Delete</button></div><div><button class='saveRow' type='button'>Save</button></div></th>"
    +"</tr>";

$(newRow).attr('id' , 'row' + someNumber);
$(newRow).appendTo("#data_table tbody");

});

【讨论】：

谢谢！不敢相信我没有想到这一点
不客气。有时我们并不都看到相同的东西。祝你有美好的一天。

【解决方案3】：

var tempCount = 100;
$("body").on("click","#addRow",function(ev){

var newRow = "<tr class='tabrow editing' id='"+tempCount+"'>"
    +"<th><div></div><div><input type='text' class='form-control' value=''/></div></th>"
    // +"<td><div>A"+len+"</div><div><input type='text' value='A"+len+"'/></div></td>"
    +"<th><div><button class='editRow ' type='button'>Edit</button></div><div><button class='deleteRow ' type='button'>Delete</button></div><div><button class='saveRow' type='button'>Save</button></div></th>"
    +"</tr>";

tempCount++;
$(newRow).appendTo("#data_table tbody"); });

【讨论】：

【解决方案4】：

将prop 用于属性并删除find 以使newRow 已经是tr。您还可以更多地利用 jquery 的可链接性。

$(
  `<tr class='tabrow editing'>
       <th><div></div><div><input type='text' class='form-control' value=''/></div></th>
       <th><div><button class='editRow ' type='button'>Edit</button></div><div><button class='deleteRow ' type='button'>Delete</button></div><div><button class='saveRow' type='button'>Save</button></div></th>"
  </tr>`
).prop('id', 'test44').appendTo(document.body);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：