I am creating a html table dynamically as follows:
var table = document.getElementById("mytable");
var rowcount = document.getElementById("mytable").rows.length;
var row = table.insertRow(rowcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = rowcount;
cell2.innerHTML = "a";
cell3.innerHTML = "b";
cell4.innerHTML = "c";
cell5.innerHTML = document.getElementById("select_product_name").value;
The last column in a row ie, cell5
which contains the id
I want a function in such a way that onclick of row in the table should get the id i.e., the value of cell5
and that full row should change color to red.
Note: use only Javascript not jQuery
var table = document.getElementById("mytable");
var rowcount = document.getElementById("mytable").rows.length;
var row = table.insertRow(rowcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = rowcount;
cell2.innerHTML = "a";
cell3.innerHTML = "b";
cell4.innerHTML = "c";
var id = document.getElementById("select_product_name").value;
cell5.innerHTML = id;
row.onclick = function() {
// Add a css class to the row
row.className += ' red';
// Alert the id
alert(id);
};