Question

我正在使用javascript创建动态表。

HTML code：

<table id="user_stop_table" class="table table-striped"></table>

在javascript中，我编写了以下代码以在表中输入值

var table = document.getElementById("user_stop_table");

var row1 = table.insertRow(0);
var cell11 = row1.insertCell(0);
var cell21 = row1.insertCell(1);
var cell61 = row1.insertCell(2);
var cell31 = row1.insertCell(3);
var cell41 = row1.insertCell(4);
var cell51 = row1.insertCell(5);
var cell81 = row1.insertCell(6);
var cell91 = row1.insertCell(7);
var cell101 = row1.insertCell(8);

cell11.innerHTML = "<b>EmpId</b>";
cell21.innerHTML = "<b>EmpName</b>";
cell61.innerHTML = "<b>EmpAddress</b>";
cell31.innerHTML = "<b>StopId</b>";
cell41.innerHTML = "<b>StopName</b>";
cell51.innerHTML = "<b>Distance (in Km)</b>";
cell81.innerHTML = "<b>Make New Stop</b>";
cell91.innerHTML = "<b>Update </b>";
cell101.innerHTML = "<b>Delete </b>";

for (var index1 = 0; index1 < res.length; index1++) {
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell6 = row.insertCell(2);
    var cell3 = row.insertCell(3);
    var cell4 = row.insertCell(4);
    var cell5 = row.insertCell(5);
    var cell8 = row.insertCell(6);
    var cell9 = row.insertCell(7);
    var cell10 = row.insertCell(8);

    cell1.innerHTML = res[index1].EmpId;
    cell2.innerHTML = res[index1].EmpName;
    cell6.innerHTML = res[index1].EmpAddress;
    cell3.innerHTML = res[index1].StopId;
    cell4.innerHTML = res[index1].StopName;
    cell5.innerHTML = res[index1].Distance;

    var rawhtml = '<button id="editbtn"> New \
                   </button>';

    cell8.innerHTML = rawhtml;

    document.getElementById("editbtn").className = "editbtn1";
    //var b1 = document.createElement("button");
    //b1.className("fa-edit");
    // b1.value("Update");
    cell9.innerHTML = '<button id="editbtn"> Update </button>';
    //cell9.appendChild(b1);
    cell10.innerHTML = '<button id="editbtn"> Delete </button>';

现在，点击动态创建的按钮，我想访问该行的第4列。

我已经找到了如何通过点击按钮来监听事件：

$('.editbtn1').click(function (evt) {
    //evt.preventDefault();
    alert(data);
});

您能帮我解释如何编写命令来检索该单元格的特定列吗？

Answer 1

使用此：

$(document).on('click','.editbtn1',function(){
   console.log($(this).closest("tr").find("td:eq(3)").html());
});

Answer 2

您可以使用closest()获取包含按钮的tr，然后获取第四个td。还可以使用event delegation使用on（）来绑定动态添加的元素。请记住，eq是从零开始的索引，因此第四个元素将具有3个索引。

$(document).on('click','.editbtn1',function(){
   alert($(this).closest('tr').find('td').eq(3).text());
});

Event Delegation

事件委托允许我们将单个事件监听器附加到父元素，将为匹配a的所有后代触发选择器，无论这些后代现在存在还是被添加到将来

Answer 3

＆＃13;

$(document).on('click','.editbtn1',function(){
   alert($(this).closest("tr").find("td:eq(3)").html());
});

＆＃13;

使用jquery访问动态创建的表的子项

3 个答案: