html <!DOCTYPE html> <html xmlns:
th="http://www.
thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Dynamic HTML Table</title> <style> table,
th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> </head> <body> <button onclick="addRow()">Add Row</button> <table id="myTable"> <
thead> <tr> <
th th:text="#{column1}"></
th> <
th th:text="#{column2}"></
th> <
th th:text="#{column3}"></
th> <
th th:text="#{column4}"></
th> <
th th:text="#{column5}"></
th> </tr> </
thead> <tbody> <tr
th:each="row, rowStat : ${rows}"> <td
th:each="cell, cellStat : ${row}"
th:onclick="'
selectOption(
this, ' + ${rowStat.index} + ', ' + ${cellStat.index} + ')'"
th:text="${cell}"></td> </tr> </tbody> </table> <script> var rows = [[null, null, null, null, null]]; function addRow() { rows.push([null, null, null, null, null]); renderTable(); } function
selectOption(cell, rowIndex, cellIndex) { var options = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"]; var
select = document.createElement("
select"); for (var i = 0; i < options.leng
th; i++) { var option = document.createElement("option"); option.value = options[i]; option.text = options[i];
select.appendChild(option); } cell.innerHTML = ""; cell.appendChild(
select); rows[rowIndex][cellIndex] =
select; } function renderTable() { var table = document.getElementById("myTable").getElementsByTagName('tbody')[0]; table.innerHTML = ""; for (var i = 0; i < rows.leng
th; i++) { var row = table.insertRow(-1); for (var j = 0; j < rows[i].leng
th; j++) { var cell = row.insertCell(j); if (rows[i][j] != null) { cell.appendChild(rows[i][j]); } else { cell.onclick = function() {
selectOption(
this, i, j) }; cell.innerHTML = "Click to
Select"; } } } } renderTable(); </script> </body> </html>把这个页面用
bootstrap进行美化一下
扫一扫
4001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
