html代码。
<!DOCTYPE html>
<html>
<script src="./js1.js"></script>
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">
<table cellpadding="1" id="example_table" cellspacing="0" bordercolor="#000000" border="1" style="text-align: center">
<tr id="trHeader">
<td>
test case 1
</td>
</tr>
<tr>
<td>
1
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="0" bordercolor="#000000" border="0.1" style="text-align: center">
<tr>
<td>
<input type="button" name="Submit" value="新增行" onclick="test1()" />
</td>
<td>
<input type="button" name="Submit" value="新增列" onclick="test2()" />
</td>
<td>
<input type="button" name="Submit" value="删除行" onclick="test3()" />
</td>
<td>
<input type="button" name="Submit" value="删除列" onclick="test4()" />
</td>
<td>
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
<input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" />
</td>
</tr>
</table>
</div>
</html>
js代码。
function test1() {
let uint_table = document.getElementById("example_table");
let rows = uint_table.rows.length;
let cols = uint_table.rows.item(0).cells.length;
let new_tr = uint_table.insertRow(rows);
new_tr.id = "row" + (rows + 1);
for (let i = 0; i < cols; i++) {
new_tr.insertCell(0).innerHTML = "haha" + (rows + 1);
}
}
function test2() {
let uint_table = document.getElementById("example_table");
let row_num = uint_table.rows.length;
let col_num = uint_table.rows.item(0).cells.length;
for (let i = 0; i < row_num; i++) {
let new_td = uint_table.rows[i].insertCell(col_num);
new_td.id = "col" + (i + 1);
new_td.innerHTML = "hehe" + i;
}
}
function test3() {
let uint_table = document.getElementById("example_table");
let row = document.getElementById("row3");
let i = row.rowIndex;
console.log(i);
uint_table.deleteRow(i);
}
function test4() {
let uint_table = document.getElementById("example_table");
let row_num = uint_table.rows.length;
let col_no = 3;
for (let i = 0; i < row_num; i++) {
uint_table.rows[i].deleteCell(col_no);
}
}
网友评论