Clever Geek Handbook

Helper child of dynamically created table using jquery

I am creating a dynamic table using javascript.

HTML code:

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

In javascript, I wrote the following code to enter values ​​into a table

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>';

Now, by clicking the button that is dynamically created, I want to access the fourth column of that row.

I already found out how to get event listener for button click:

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

Can you help me write a command to get a specific column of this cell?

+3


source to share


3 answers


Use this:



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


source


You can use closest()

to get the button tr

and then get its fourth td

. Also use event delegation by using the () function to add an element dynamically. Keep in mind that eq is a zero-based index, so the fourth element will have 3 indices.

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


Delegating events

Delegation event allows us to attach a single event listener to a parent that will fire for all descendants matching the selector, whether those descendants exist or are added in the future.

+1


source 


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


0


source






More articles:


All Articles