一、创建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); // 将表格添加到页面中
二、添加行和单元格
在javascript中添加表格行和单元格也有两种方法。一种是使用innerhtml属性,代码如下:
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设置表格,可以让表格的样式更加灵活和美观。开发者们可以根据自己的需求进行修改和拓展,实现更加复杂和高效的表格设置。
以上就是javascript怎么设置表格的详细内容。
