用js 创建一个三行三列的表格（边框粗细为1px，表格内容随意填写），一个按钮，当点击按钮时表格的背景颜色变成绿色。

时间: 2024-03-25 07:40:15 浏览: 52

javascript下动态创建表格的三种方式

### JavaScript 下动态创建表格的三种方式在网页开发过程中，经常需要通过JavaScript来动态地创建或更新HTML元素，其中就包括表格（`<table>`）。本文将详细介绍在JavaScript中动态创建表格的三种常见方法，并对每种方法进行深入剖析。 #### 方法一：使用 `insertRow()` 和 `insertCell()` 这种方法是最直接的实现方式，它利用了`HTMLTableElement`对象提供的`insertRow()`和`insertCell()`方法来创建新的行和单元格。这种方式简单易懂，适合于快速构建表格。 ```javascript function tableAdd() { var data = {"ٶ": "http://www.baidu.com", "": "http://www.sina.com", "": "http://www.163.com"}; var table = document.getElementById("tab"); // 设置表格边框 table.setAttribute("border", 2); for (var key in data) { var value = data[key]; // 创建新行 var tr = table.insertRow(-1); // 创建单元格并设置内容 var td1 = tr.insertCell(-1); td1.innerHTML = "<a href='" + value + "'>" + key + "</a>"; var td2 = tr.insertCell(-1); td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; } } ``` #### 方法二：使用 DOM 方法创建 `<tbody>`、`<tr>` 和 `<td>` 第二种方法是通过DOM操作创建`<tbody>`、`<tr>`和`<td>`元素，然后将它们添加到表格中。这种方法比第一种更加灵活，可以方便地控制表格结构，比如将不同的行分组到不同的`<tbody>`中。 ```javascript function tableAdd() { var data = {"ٶ": "http://www.baidu.com", "": "http://www.sina.com", "": "http://www.163.com"}; var table = document.getElementById("tab"); // 设置表格边框 table.setAttribute("border", 2); for (var key in data) { var value = data[key]; // 创建 tbody 元素 var tbody = document.createElement("tbody"); // 创建 tr 元素 var tr = document.createElement("tr"); // 创建 td 元素 var td1 = document.createElement("td"); td1.innerHTML = "<a href='" + value + "'>" + key + "</a>"; tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; tr.appendChild(td2); tbody.appendChild(tr); table.appendChild(tbody); } } ``` #### 方法三：直接操作 `<tbody>` 的 `tBodies` 属性第三种方法是在已有的`<tbody>`中直接插入行，这种方法适用于已经存在一个或多个`<tbody>`的情况。这种方式可以避免重复创建`<tbody>`元素，从而提高性能。 ```javascript function tableAdd() { var data = {"ٶ": "http://www.baidu.com", "": "http://www.sina.com", "": "http://www.163.com"}; var table = document.getElementById("tab"); // 设置表格边框 table.setAttribute("border", 2); for (var key in data) { var value = data[key]; // 创建 tr 元素 var tr = document.createElement("tr"); // 创建 td 元素 var td1 = document.createElement("td"); td1.innerHTML = "<a href='" + value + "'>" + key + "</a>"; tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; tr.appendChild(td2); // 将 tr 添加到第一个 tbody 中 table.tBodies[0].appendChild(tr); } } ``` ### 总结以上介绍了三种在JavaScript中动态创建表格的方法，每种方法都有其适用场景： - **方法一**：最简单直接，适用于简单的表格创建。 - **方法二**：更灵活，适用于需要精细控制表格结构的情况。 - **方法三**：效率更高，适用于已有`<tbody>`元素的情况。在实际开发中，可以根据具体需求选择合适的方法。此外，还需要注意兼容性问题，确保所使用的JavaScript代码在不同浏览器上都能正常工作。

好的，以下是代码实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格变色</title> <style> table { border-collapse: collapse; border: 1px solid black; } td { padding: 10px; border: 1px solid black; } </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <button onclick="changeColor()">变色</button> <script> function changeColor() { var table = document.getElementsByTagName('table')[0]; table.style.backgroundColor = 'green'; } </script> </body> </html> ``` 这段代码会生成一个三行三列的表格，每个单元格都有内容填充，并且有粗细为1px的边框。同时，页面上会出现一个按钮，点击按钮会将表格背景颜色变为绿色。

阅读全文

用js 创建一个三行三列的表格（边框粗细为1px，表格内容随意填写），一个按钮，当点击按钮时表格的背景颜色变成绿色。

相关推荐

使用CSS美化HTML表格：1px边框、粗边框与虚线边框技巧

JSP实现三行三列带表头表格示例

用js实现1.创建一个三行三列的表格（边框粗细为1px，表格内容随意填写），一个按钮，当点击按钮时表格的背景颜色变成绿色。

1.创建一个三行三列的表格（边框粗细为1px，表格内容随意填写），一个按钮，当点击按钮时表格的背景颜色变成绿色。

1.创建一个三行三列的表格（边框粗细为Ipx，表格内容随意 填写），一个按钮，当点击按钮时表格的背景颜色变成绿色。

建立一个表格，表格样式：边框粗细为 1，宽度为 60%，背景颜色值为 #008000，边框与边框之间的距离为 2。 表格内容能包含周一到周五的上午和下午的四节课（具体课程内容，请自行设置）。

盒子边框border的三要素：宽/形状/颜色

JS验证码,html实现

[浓缩精华]CSS开发人员必备的参考手册之三

CSS 使用规则总结

HTML表格：呈现结构化数据

Textile库中的列表与表格：数据展示的7大最佳实践

入门级别：如何使用HTML和CSS构建简单的网页

使用Dreamweaver创建细边框与多彩表格教程

使用JavaScript创建带边框的HTML表格

【路径规划】狮群算法栅格地图机器人最短路径规划【含Matlab仿真 2863期】.zip

毕业设计JavaScript开发的心理咨询预约系统小程序源码（包含前端+后端两部分）.zip

基于Python开发的一套内容管理系统资料齐全+详细文档.zip

【路径规划】自私羊群算法栅格地图机器人最短路径规划【含Matlab仿真 2919期】.zip

最新推荐

python设置表格边框的具体方法

【路径规划】狮群算法栅格地图机器人最短路径规划【含Matlab仿真 2863期】.zip

毕业设计JavaScript开发的心理咨询预约系统小程序源码（包含前端+后端两部分）.zip

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

1.创建一个三行三列的表格（边框粗细为Ipx，表格内容随意填写），一个按钮，当点击按钮时表格的背景颜色变成绿色。

建立一个表格，表格样式：边框粗细为 1，宽度为 60%，背景颜色值为 #008000，边框与边框之间的距离为 2。表格内容能包含周一到周五的上午和下午的四节课（具体课程内容，请自行设置）。