js实现动态修改table内容功能资源-CSDN下载

共2个文件

js：1个

html：1个

5星 · 超过95%的资源需积分: 50 50 浏览量 2010-08-07 18:21:50 上传评论 2 收藏 2KB RAR 举报

在JavaScript中，动态修改HTML表格（Table）的内容是一项常见的任务，尤其在网页交互和数据展示时。本篇文章将深入探讨如何使用JavaScript实现这一功能，包括选择表格元素、获取和设置单元格内容，以及监听事件来实时更新表格。我们需要了解HTML中的`<table>`元素结构，通常包括`<tr>`（行）、`<th>`（表头单元格）和`<td>`（数据单元格）。在JavaScript中，我们可以通过DOM（Document Object Model）接口来操作这些元素。 1. **选择表格和单元格**： - 使用`document.getElementById`或`document.querySelector`选取特定ID的表格，例如： ```javascript var myTable = document.getElementById('myTable'); ``` - 使用`document.getElementsByTagName`或`document.querySelectorAll`选取所有`<td>`或`<th>`，例如： ```javascript var allCells = myTable.getElementsByTagName('td'); ``` - 若要选择特定列，可以获取表格的`rows`和`cells`属性，例如获取第二列的所有单元格： ```javascript var secondColumnCells = myTable.rows[i].cells[1]; ``` 2. **获取和设置单元格内容**： - 获取单元格内容使用`innerHTML`属性，例如： ```javascript var cellContent = allCells[0].innerHTML; ``` - 设置单元格内容同样使用`innerHTML`，例如： ```javascript allCells[0].innerHTML = '新的内容'; ``` 3. **动态修改**： - 你可以根据需求创建函数，通过参数动态改变特定单元格的内容，例如： ```javascript function updateCellContent(rowIndex, colIndex, newText) { myTable.rows[rowIndex].cells[colIndex].innerHTML = newText; } ``` - 也可以监听事件，比如按钮点击，来触发内容更新，例如： ```javascript var button = document.getElementById('updateButton'); button.addEventListener('click', function() { var newRowContent = prompt('请输入新内容'); updateCellContent(0, 0, newRowContent); }); ``` 4. **数据绑定与异步更新**： - 当数据来源于服务器或其他异步来源时，可以使用`fetch`或`XMLHttpRequest`获取数据，然后更新表格，例如： ```javascript fetch('data.json') .then(response => response.json()) .then(data => { data.forEach(item => { var row = myTable.insertRow(); Object.values(item).forEach(value => { var cell = row.insertCell(); cell.innerHTML = value; }); }); }); ``` 5. **事件委托**： - 如果表格是动态生成的，可以直接在`<table>`上监听事件，通过事件对象的`target`属性判断并处理特定单元格，例如： ```javascript myTable.addEventListener('click', function(event) { if (event.target.tagName.toLowerCase() === 'td') { event.target.innerHTML = '已点击'; } }); ``` 总结，使用JavaScript动态修改HTML表格内容涉及选取表格元素、操作DOM属性、监听和响应事件等技术。通过熟练掌握这些技巧，你可以构建出具有高度交互性和动态性的网页应用。

资源推荐

资源详情

资源评论

收起资源包目录

js实现动态修改table内容功能.rar （2个子文件）

js实现动态修改table内容功能

tt.js 2KB

table.html 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用dom动态控制表格</title> <style type="text/css"> body { text-align:center; } .datalist { padding:10px; margin:5px; text-align:left; border:1px solid #cc9999; /*表格边框*/ font-family:Arial; border-collapse:collapse; font-size:16px; background-color:#bbcc99; } .datalist caption { font-size:30px; color:#336699; padding-top:0px; text-align:left; border:0px solid #cc9999; /*表格标题边框*/ } .datalist tr { height:27px; } .datalist th { background-color:#999999; text-align:center; padding:2px 10px 4px 10px; border:1px solid #cc9999; /*列边框*/ font-weight:blod; color:#ffffff; /*表头颜色*/ } .datalist td { padding:0px; /*单元缩进*/ border:1px solid #cc9999; /*单元格边框*/ width:80px; } .input { width:80px; margin:0px; background-color:#bbcc99; border:0px; } .input2 { width:80px; margin:0px; background-color:white; border:0px; } input.text { background-color:#999999; } </style> <script type="text/javascript" src="js/tt.js"></script> </head> <body> <center> <table id="myTable" class="datalist"> <caption>图书列表</caption> <tr> <th scope="col">书名</th> <th scope="col">作者</th> <th scope="col">价格</th> <th scope="col">页数</th> <th scope="col">分类</th> <th scope="col">开本</th> <th scope="col">字数</th> <th scope="col">纸张</th> </tr> <tr> <td><input type="text" id="t1" value="数学分析" class="input" onclick="edit();"></input></td> <td><input type="text" id="t1" value="陈纪修" class="input" onclick="edit();"></input></td> <td><input type="text" id="t1" value="17.8" class="input" onclick="edit();"></input></td> <td><input type="text" id="t1" value="449" class="input" onclick="edit();"></input></td> <td><input type="text" id="t1" value="数学" class="input" onclick="edit();"></input></td> <td><input type="text" id="t1" value="32开" class="input" onclick="edit();"></input></td> <td><input type="text" id="t1" value="365000" class="input" onclick="edit();"></input></td> <td><input type="text" id="t1" value="胶版纸" class="input" onclick="edit();"></input></td> </tr> </table> </center> </body> </html>

评论收藏

内容反馈