javascript怎么设置表格

javascript是一种广泛使用的脚本语言，可用于制作交互式网络应用程序，也适用于设置html表格。本文将介绍如何使用javascript设置html表格，包括表格的创建、添加行和单元格、以及样式设置。

一、创建HTML表格

在JavaScript中创建表格有两种方法。第一种是使用innerHTML属性，代码如下：

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML = "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr><tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>"; // 设置表格内容
document.body.appendChild(table); // 将表格添加到页面中

另一种方法是使用DOM创建表格，代码如下：

var table = document.createElement("table"); // 创建一个table元素
var row1 = document.createElement("tr"); // 创建第一行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "第一行，第一列"; // 设置单元格内容
cell2.innerHTML = "第一行，第二列";
row1.appendChild(cell1); // 将单元格添加到行中
row1.appendChild(cell2);
var row2 = document.createElement("tr"); // 创建第二行
var cell3 = document.createElement("td"); // 创建第一列单元格
var cell4 = document.createElement("td"); // 创建第二列单元格
cell3.innerHTML = "第二行，第一列";
cell4.innerHTML = "第二行，第二列";
row2.appendChild(cell3); // 将单元格添加到行中
row2.appendChild(cell4);
table.appendChild(row1); // 将行添加到表格中
table.appendChild(row2);
document.body.appendChild(table); // 将表格添加到页面中

二、添加行和单元格

立即学习“Java免费学习笔记（深入）”；

在JavaScript中添加表格行和单元格也有两种方法。一种是使用innerHTML属性，代码如下：

云网OA

采用JSP开发的办公自动化产品、基于B/S结构，运行环境：JDK v1.5、Tomcat v5.5、MySQL v4.1，三者均为以上版本其他相关内容：可视化流程设计： 流程支持串签、会签和分支流程，可以设置流程节点的修改、删除权限，并可指定流程中各个用户在表单中可以填写的域。智能表单所见即所得设计： 智能设计，自动在数据库中生成表格，方便优化程序 公共交流： 集论坛、博客、聊天室于一体文件柜：C

下载

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML += "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr>"; // 添加一行
table.innerHTML += "<tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>";
document.body.appendChild(table); // 将表格添加到页面中

另一种方法是使用DOM添加行和单元格，代码如下：

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
table.appendChild(row); // 将行添加到表格中
document.body.appendChild(table); // 将表格添加到页面中

三、样式设置

使用JavaScript设置表格样式也很简单。可以使用style属性设置行和单元格的样式，代码如下：

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
cell1.style.border = "1px solid black"; // 设置单元格边框
cell2.style.border = "1px solid black";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
row.style.backgroundColor = "cyan"; // 设置行背景色
table.appendChild(row); // 将行添加到表格中
table.style.borderCollapse = "collapse"; // 设置表格边框合并
document.body.appendChild(table); // 将表格添加到页面中

总结：

本文介绍了使用JavaScript设置HTML表格的方法，包括表格的创建、添加行和单元格、以及样式设置。通过JavaScript设置表格，可以让表格的样式更加灵活和美观。开发者们可以根据自己的需求进行修改和拓展，实现更加复杂和高效的表格设置。