要素。ただし、場合によっては、より複雑な構造のテーブルが必要になります。
課題: 特定のテーブル構造の作成
3 行のテーブルを作成する JavaScript 関数があるとします。各行に 2 つのセル。この関数をどのように調整して次のテーブルを作成できるでしょうか:
<code class="html"><table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></code>
解決策: rowSpan を使用した行の結合
結合されたセルを含むテーブルを作成するには、以下が必要です。 rowSpan 属性を使用します。コードを変更する方法は次のとおりです:
JavaScript コード:
<code class="javascript">function tableCreate() {
const body = document.body;
const tbl = document.createElement('table');
for (let i = 0; i < 3; i++) {
const row = document.createElement('tr');
for (let j = 0; j < 2; j++) {
if (i === 2 && j === 1) {
continue;
} else {
const cell = document.createElement('td');
cell.textContent = `Cell I${i}/J${j}`;
if (i === 1 && j === 1) {
cell.setAttribute('rowspan', '2');
}
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
body.appendChild(tbl);
}
tableCreate();</code>
説明:
- rowSpan 属性が 2 行目の 2 番目のセルに追加され、下のセルと結合されます。
- セルの重複を防ぐため、j === 1 の反復では rowSpan を持つセルがスキップされます。
insertRow と insertCell を使用した改良されたショートコード:
<code class="javascript">function tableCreate() {
const body = document.body;
const tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '1px solid black';
for (let i = 0; i < 3; i++) {
const tr = tbl.insertRow();
for (let j = 0; j < 2; j++) {
if (i === 2 && j === 1) {
break;
} else {
const td = tr.insertCell();
td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
td.style.border = '1px solid black';
if (i === 1 && j === 1) {
td.setAttribute('rowSpan', '2');
}
}
}
}
body.appendChild(tbl);
}
tableCreate();</code>
この改良されたバージョンでは、より簡潔な実装のために insertRow メソッドと insertCell メソッドを使用します。
以上がJavaScript を使用してセルを結合したテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
