javascript add on click event on table rows
The html table.
[code language=”html”]
<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>
[/code]
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.
[code language=”javascript”]
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);
});
[/code]
Search within Codexpedia
Search the entire web