How to Create Tables with Merge Cells Using JavaScript?
Mary-Kate OlsenOriginal
2024-10-19 08:17:31457browse
Creating Complex Tables Using JavaScript
In JavaScript, the creation of tables can be performed using the
and elements. However, sometimes, tables with more intricate structures are required.
Challenge: Creating a Specific Table Structure
Suppose you have a JavaScript function that creates a table with 3 rows and 2 cells in each row. How can you adapt this function to create the following table:
To create the table with a merged cell, you need to use the rowSpan attribute. Here's how you can modify your code:
JavaScript Code:
<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>
Explanation:
The rowSpan attribute is added to the second cell in the second row, merging it with the cell below.
The cell with rowSpan is skipped in the j === 1 iteration to prevent duplicate cells.
Improved Shortcode Using insertRow and 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>
This improved version uses the insertRow and insertCell methods for a more concise implementation.
The above is the detailed content of How to Create Tables with Merge Cells Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
