2.- Show a row.
Now we want that instead of showing the content of a cell, it shows the content of the entire row.
We ask GPT:
In the above code when we click on a cell we get an alert with its content, I want that when we click on a cell we get an alert with the content of its entire row.
tablacss_row.htm
<!DOCTYPE html>
<html>
<head>
<title>Table with CSS</title>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #000;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #d1f0d1;
}
tr:nth-child(odd) {
background-color: #ffdede;
}
</style>
</head>
<body>
Click on a cell.<br><br>
<div id="table-container"></div>
<script>
var string = "1,2,3,4\n5,6,7,8\n9,10,11,12\n13,14,15,16";
var rows = string.split("\n");
var table = document.createElement("table");
var headerRow = document.createElement("tr");
var headerCell1 = document.createElement("th");
var headerCell2 = document.createElement("th");
var headerCell3 = document.createElement("th");
var headerCell4 = document.createElement("th");
headerCell1.appendChild(document.createTextNode("Column 1"));
headerCell2.appendChild(document.createTextNode("Column 2"));
headerCell3.appendChild(document.createTextNode("Column 3"));
headerCell4.appendChild(document.createTextNode("Column 4"));
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
headerRow.appendChild(headerCell3);
headerRow.appendChild(headerCell4);
table.appendChild(headerRow);
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].split(",");
var row = document.createElement("tr");
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
for (var j = 0; j < cols.length; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(cols[j]));
row.appendChild(cell);
}
row.addEventListener("click", function() {
var rowContent = "";
for (var k = 0; k < this.cells.length; k++) {
rowContent += this.cells[k].innerHTML + "|";
}
alert(rowContent);
});
table.appendChild(row);
}
document.getElementById("table-container").appendChild(table);
</script>
</body>
</html>