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

Question

我有一个 table 和动态创建到 table 中的行，如下所示：

 $("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);

Answer 1

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

Answer 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");

});

Answer 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"); });

Answer 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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

Set the id of a dynamically created tr tag

javascript

jquery

attr