js使用createElement给table里添加tr、td

一、createElement的定义

createElement()方法通过指定名称创建一个元素

例如:document.createElement("tr")  创建一个tr的元素节点

二、语法

document.createElement(nodename)

nodename  类型为string类型 为创建元素的名称。

三、例如:给table里新增单元格

1、找到table标签

var tableobj=document.getElementById("table");

2、创建一个tr节点

var trobj = document.createElement("tr");

3、创建一个td节点

var tdobj = document.createElement("td");

4、把td节点添加到tr里

trobj.appendChild(tdobj);

5.把tr节点添加到table里

tableobj.appendChild(trobj);

这样就在表格里增加了一个单元格,然后格式在style里设置即可

### HTML `table`、`tr` `td` 的嵌套结构及用法 HTML 中的表格通过 `<table>` 标签来定义,而表格的具体内容则由 `<tr>`(表格行)、`<th>`(表头单元格) `<td>`(数据单元格)标签构成。以下是这些标签之间的嵌套关系及其基本用法: #### 1. 基本语法 - **`<table>`**: 定义整个表格。 - **`<tr>`**: 表示表格中的一行,必须嵌套在 `<table>` 标签内部。 - **`<td>` 或 `<th>`**: 表示表格中的单元格,其中 `<td>` 是普通的数据单元格,而 `<th>` 则表示表头单元格。 一个简单的表格结构如下所示[^2]: ```html <table> <tr> <td>单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格3</td> <td>单元格4</td> </tr> </table> ``` #### 2. 嵌套关系 - `<table>` 是最外层容器,所有的表格内容都应位于其内部。 - 每一行由 `<tr>` 标记,每一行可以包含多个 `<td>` 或 `<th>` 单元格。 - 如果需要更复杂的布局,可以在某个单元格内再嵌入一个新的 `<table>` 来实现子表格的效果[^3]。 #### 3. 使用 JavaScript 动态生成表格 如果希望动态生成带有嵌套表格的内容,可以通过 JavaScript 实现。以下是一个例子,展示如何在一个父表格的第一列中放置文本,并在同一列中嵌套另一个表格 (`id='questable'`): ```javascript // 获取目标位置 var parentTable = document.getElementById('parentTable'); // 创建新行并附加到父表格 for (let i = 0; i < 5; i++) { var row = document.createElement('tr'); // 创建第一个单元格 var cell1 = document.createElement('td'); var textNode = document.createTextNode(`Row ${i + 1} Text`); cell1.appendChild(textNode); // 在同一单元格中嵌套子表格 var subTable = document.createElement('table'); subTable.id = 'questable'; subTable.border = '1'; // 设置边框以便观察效果 // 子表格内容 var subTableRow = document.createElement('tr'); var subTableCell = document.createElement('td'); subTableCell.textContent = `Sub Table Row ${i + 1}`; subTableRow.appendChild(subTableCell); subTable.appendChild(subTableRow); // 将子表格追加到当前单元格 cell1.appendChild(subTable); row.appendChild(cell1); // 添加更多常规单元格 var cell2 = document.createElement('td'); cell2.textContent = `Column 2 Data`; row.appendChild(cell2); // 把整行加入父表格 parentTable.appendChild(row); } ``` 上述代码会创建一个具有两列的表格,在第一列中显示一些文本以及嵌套的小型子表格[^1]。 #### 4. 关键点总结 - 父级 `<table>` 可以容纳多行 `<tr>`,每行又可进一步划分为若干个 `<td>` 或 `<th>`。 - 若要在某单元格内嵌套额外的表格,则只需将新的 `<table>` 元素作为该单元格的孩子节点即可。 - 当涉及复杂逻辑时,推荐借助脚本来简化操作过程。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值