<table> <thead><th>序号</th><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></thead>...
*************************/
function insertRow(pageCode,index,tpltype){
index = index==null?0:index;
var gi = parseInt(globalindex[pageCode]);
if(is
$("#J_add").on("click",function(){
var
table
=document.getElementById("J_tab");
var num =
table
.rows.length;
var A_tr = ''+num+'<input id="intereceptMethod'+num+'"
name="interecep
JavaScript学习笔记：
动态
添加与删除表格
一、添加表格
行
与单元格
Javascript可以控制
table
，
动态
的
插入
行
和单元格。rows保存着<tbody>元素
中
行
的HTMLCollection。
语法：
table
Object.insertRow(index)
该方法创建一个新的
Table
Row对象，表示一个新的<tr>标记，用于在表格
中
的指定位置
插入
一个新
行
，并返...
在一个自定义的表格
中
，需要
动态
新增
行
、
动态
删除
行
，都可以通过
js
控制来实现这一功能。
对于这个功能的实现，下面我分享我所用的
动态
新增
行
、删除
行
的方法：
首先，先来了解一下html的页面布局：
<
table
class="text-center" id="tabPurchaseReturnDe...
vartr=td.parentNode;//obj.parentNode.parentNode是<tr>
var
table
=tr.parentNode;//tr.parentNode是<
table
>
vary=
table
.rows.length;
varo...
<caption>标题</caption>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
function addRow(
table
Id) {
var tb=document.getElementById(
table
Id);
var tbRows=tb.rows;
var newTr=tb.insertRow(tbRows.length);
newTr.align="center";
var newTd0=newTr.insertCell(0);
var newTd1=newTr.insertCell(1);
var newTd2=newTr.insertCel
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>...
function addRow() {
var
table
= document.getElementById("my
Table
");
var row =
table
.insertRow(); //
插入
新
行
var cell1 = row.insertCell(0); //
插入
单元格
var cell2 = row.insertCell(1);
cell1.innerHTML = "新姓名"; // 设置单元格内容
cell2.innerHTML = "新年龄";
</script>
使用 jQuery：
```html
<
table
id="my
Table
">
<th>姓名</th>
<th>年龄</th>
<td>小明</td>
<td>20</td>
</
table
>
<button onclick="addRow()">添加
行
</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.
js
"></script>
<script>
function addRow() {
$("#my
Table
").append("<tr><td>新姓名</td><td>新年龄</td></tr>"); // 添加
行
</script>
使用 JavaScript：
```html
<
table
id="my
Table
">
<th>姓名</th>
<th>年龄</th>
<td>小明</td>
<td>20</td>
</
table
>
<button onclick="addColumn()">添加列</button>
<script>
function addColumn() {
var
table
= document.getElementById("my
Table
");
var header =
table
.getElementsByTagName("th"); // 获取表头
for (var i = 0; i < header.length; i++) {
var newCell = header[i].insertCell(-1); // 在表头
插入
单元格
newCell.innerHTML = "新列"; // 设置单元格内容
var row =
table
.getElementsByTagName("tr"); // 获取表格所有
行
for (var i = 0; i < row.length; i++) {
var newCell = row[i].insertCell(-1); // 在每
行
末尾
插入
单元格
newCell.innerHTML = "新单元格"; // 设置单元格内容
</script>
使用 jQuery：
```html
<
table
id="my
Table
">
<th>姓名</th>
<th>年龄</th>
<td>小明</td>
<td>20</td>
</
table
>
<button onclick="addColumn()">添加列</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.
js
"></script>
<script>
function addColumn() {
$("#my
Table
tr").each(function() {
$(this).append("<td>新单元格</td>"); // 在每
行
末尾
插入
单元格
$("#my
Table
th:last-child").after("<th>新列</th>"); // 在表头
插入
新列
</script>
