如何为jQuery动态创建的tr标签设置id属性

你之前的写法无效是因为$(newRow)得到的jQuery对象本身就指向你创建的tr元素，find('tr')是查找该tr的后代子元素中的tr节点，自然找不到对应元素，无法设置id。

方案1：构造HTML字符串时直接拼接id #

直接在定义newRow的tr标签里把id拼进去即可，代码示例：

$("body").on("click","#addRow",function(ev){
    // 举个例子：用现有表格行数生成序号，可替换为你自己的逻辑
    var len = $("#data_table tbody tr").length;
    var someNumber = len + 1;
    var newRow = "<tr id='row"+ someNumber +"' 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>";
    $(newRow).appendTo("#data_table tbody");
});

方案2：通过jQuery对象直接设置id #

不用调用find方法，直接给创建好的jQuery对象设置attr属性即可，代码示例：

$("body").on("click","#addRow",function(ev){
    var someNumber = 1; // 替换为你自己的序号生成逻辑
    var newRow = "<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>";
    // 直接给tr对象设置id，不需要find
    var $newRow = $(newRow).attr('id' , 'row' + someNumber);
    $newRow.appendTo("#data_table tbody");
});

内容的提问来源于stack exchange，提问作者Rey