I am dynamically creating a table and want to have every row clickable and link to an URL and open the URL after clicking.
I figured out to create the table and set every row as clickable-row with bootstrap.
// Table Body
var tableBody = document.createElement('tbody');
tableData.forEach(function(rowData) {
var row = document.createElement('tr');
var IntegrityURL = "integrity://lanwinsvmks1.eu.adglob.net:8001/im/viewissue?selection=";
var ReqURL = IntegrityURL.concat(rowData[0]);
row.setAttribute("class", "clickable-row");
row.setAttribute("href", ReqURL);
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
var context = getColor(cellData);
cell.setAttribute("bgcolor",context);
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
I also set up a click function in doc.ready:
$('#OverviewTable tr').click(function() {
var href = $(this).find("tr").attr("href");
if(href) {
window.location = href;
}
});
The result in html looks right, but the row is not clickable and the click() function is not called.
What am I missing?