table.innerHTML

错误现象:
在IE中使用如下语句:table.innerHTML = content; 动态修改table的HTML内容时,出现“未知运行错误”。
错误原因:
table的innerHTML属性是只读的,不能更改。类似的还有THEAD、TFOOT和TR。
解决方法:
使用table的对象模型或者DOM方法动态修改table,如:insertRow、insertCell、createTfoot、createThead或apendChild等。



----------------------------------------------------------------

若是大批量修改:可以外套div,进行innerHTML更改,例如:

<div id="div1">
<table id="table1" border="1" bordercolor='#000000' align="center"
style="border-collapse:collapse;width:500px">
</table>
</div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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.length; 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.length; i++) { var row = table.insertRow(-1); for (var j = 0; j < rows[i].length; 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进行美化一下
04-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值