javascript add on click event on table rows

The html table.

<table id="my-table-id" border=1>
 <tbody style="cursor:pointer">
  <tr><td>row one</td></tr>
  <tr><td>row two</td></tr>
  <tr><td>row three</td></tr>
 </tbody>
</table>

The javascript function that adds on click event on each row in the table. The function takes the table id as the parameter and return a callback with the row object on each row when it is clicked.

function onRowClick(tableId, callback) {
    var table = document.getElementById(tableId),
    	rows = table.getElementsByTagName("tr"),
    	i;
    for (i = 0; i < rows.length; i++) {
        table.rows[i].onclick = function (row) {
        	return function () {
        		callback(row);
        	};
        }(table.rows[i]);
    }
};

onRowClick("my-table-id", function (row){
	var value = row.getElementsByTagName("td")[0].innerHTML;
    document.getElementById('click-response').innerHTML = value + " clicked!";
    console.log("value>>", value);
});

demo

Search within Codexpedia

Custom Search

Search the entire web

Custom Search