how to add event handler on row of table

Question

var table = $("<table />").attr({id:'table1'});            
        var appenddata;
        names = Object.keys(res);
        var row = $('<tr />');
        $(names).each(function (index, value) {
            $(row).append("<th>" + value + "</th>");
        });
        $(table).append(row);
        $(Result).each(function (index, value) {
            var tr = $('<tr />').attr({});
            $(names).each(function (i,iValue) {
                $(tr).append("<td>" + value[names[i]]+"</td>");
            });
            $(table).append(tr);
        });

        $("#tab1").append(table);

enter image description here

I have this table, I want to add click event on rows, like if user click on anywhere on the row, It shows an alert.

Possible duplicate of [Adding an onclick event to a table row](https://stackoverflow.com/questions/1207939/adding-an-onclick-event-to-a-table-row) — Samuil Petrov, Jun 01 '17 at 09:01

score 1 · Accepted Answer · answered Jun 01 '17 at 09:03

1

Simply do with on() click for dynamically created element. Add the below code in your js

$(document).on('click','#table1 tr',function(){
alert('something')
})

answered Jun 01 '17 at 09:03

prasanth

22,145
4
29
53

nick zoum · Answer 2 · 2017-06-01T09:12:49.190

This should work:

// table is a refence to the HTMLTableElement
var trList = table.getElementsByTagName("tr");
for(var index = 0; index < trList.length; index++) {
    trList[index].addEventListener("click", function(event) {
        alert("Row Clicked");
    });
}

Here is a working example

var table = document.getElementById("table");
var trList = table.getElementsByTagName("tr");
for(var index = 0; index < trList.length; index++) {
    (function (index){
        trList[index].addEventListener("click", function(event) {
            alert("Row " + (index+1) + " Clicked");
        });
    }(index));
}

<table id="table">
  <tbody>
    <tr>
      <td>
        Row 1
      </td>
    </tr>
    <tr>
      <td>
        Row 2
      </td>
    </tr>
  </tbody>
</table>

score 0 · Answer 3 · answered Jun 01 '17 at 09:10

0

You can not band a event to a future element! You must user a other element to proxy the event for the future element!

$("body").on('click','#table1 tr',function(){
    alert('your msg');
})

answered Jun 01 '17 at 09:10

时间只会一直走

813
8
18

score 0 · Answer 4 · answered Jun 01 '17 at 09:17

You can do something like this :

     $(function(){
         $(document).on('click','#table1 tr',function(e){
            alert(this.data('message'));
         })
      });


       // This will come inside your custom method or ajax success
        var table = $("<table />").attr({id:'table1'});            
        var appenddata;
        names = Object.keys(res);
        var row = $('<tr />');
        $(names).each(function (index, value) {
            $(row).append("<th>" + value + "</th>");
        });
        $(table).append(row);
        $(Result).each(function (index, value) {

            var tr = $('<tr />', { 'class': 'classname','data-message' :value[names[i]]});
            $(names).each(function (i,iValue) {
                $(tr).append("<td>" + value[names[i]]+"</td>");
            });
            $(table).append(tr);
        });

        $("#tab1").append(table);

how to add event handler on row of table

4 Answers4