首頁 > web前端 > 前端問答 > javascript怎麼設定表格

javascript怎麼設定表格

PHPz
發布: 2023-04-21 09:45:24
原創
2425 人瀏覽過

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); // 将表格添加到页面中
登入後複製

二、新增行和儲存格

#在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怎麼設定表格的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板