Comment configurer un tableau en javascript

JavaScript est un langage de script largement utilisé qui peut être utilisé pour créer des applications Web interactives et convient également à la configuration de tableaux HTML. Cet article explique comment utiliser JavaScript pour configurer des tableaux HTML, y compris la création de tableaux, l'ajout de lignes et de cellules et les paramètres de style.

1. Créer des tableaux HTML

Il existe deux façons de créer des tableaux en JavaScript. La première consiste à utiliser l'attribut innerHTML, le code est le suivant :

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

L'autre méthode consiste à utiliser DOM pour créer un tableau, le code est le suivant :

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

Deuxièmement, ajoutez des lignes et des cellules

Il y en a deux façons d'ajouter des lignes et des cellules de tableau dans la méthode JavaScript. La première consiste à utiliser l'attribut innerHTML, le code est le suivant :

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

L'autre méthode consiste à utiliser DOM pour ajouter des lignes et des cellules, le code est le suivant :

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

3. Paramétrage du style

Définition du style du tableau à l'aide JavaScript est également très simple. Vous pouvez utiliser l'attribut style pour définir le style des lignes et des cellules. Le code est le suivant :

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

Résumé :

Cet article explique comment utiliser JavaScript pour définir des tableaux HTML, y compris la création de tableaux, l'ajout de lignes et de cellules, et paramètres de style. Définir le tableau via JavaScript peut rendre le style du tableau plus flexible et plus beau. Les développeurs peuvent modifier et étendre selon leurs propres besoins pour obtenir des paramètres de table plus complexes et plus efficaces.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!