<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#mytable {
margin-top: 20px;
}
</style>
</head>
<body>
<button onclick="aa()">点击添加表格</button>
<div id="box">
<!-- <table frame="border" rules="all" id="mytable">
<caption>测试表</caption>
<tr>
<td>单元格</td><td>单元格</td>
</tr>
</table> -->
</div>
<div id="container">
</div>
<script>
let i = 0;
function aa() {
let box = document.getElementById('box');
let str = '';
str += `
<table frame="border" rules="all" id="mytable">
<tr>
<td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td>
</tr>
<tr>
<td>单元格</td><td>单元格</td>
</tr>
</table>
<p><input type="button" value="增加行" οnclick="addrow()" >  <input type="button" value="删除行" οnclick="delrow()">  
<input type="button" value="增加列" οnclick="addcol()">  <input type="button" value="删除列" οnclick="delcol()"></p>
`;
box.innerHTML += str;
let eles = box.querySelectorAll('table');
console.log(eles);
eles.forEach(function (v, i) {
v.setAttribute('id', 'mytable-' + (i + 1))
})
}
function addrow(event) {
let ev = event || window.event,
tag=ev.target.parentNode.previousElementSibling;
console.log(tag);
var c = tag;
console.log(c);
if (c.rows.length == 0) {//如果是向一个空表增加一行
var x = c.insertRow(-1);//向空表插入一行
var y = x.insertCell(-1);//向新行插入一列
y.innerHTML = " ";
}
else {
var z = c.rows[0].cells;//如果不是空表,首先获得表格有多少列,先获取再插入新行
var x = c.insertRow(-1);
for (var i = 0; i < z.length; i++) {//依次向新行插入表格列数的单元格
var y = x.insertCell(i);
y.innerHTML = " " + i;
}
}
}
function delrow(event) {
let ev = event || window.event,
tag=ev.target.parentNode.previousElementSibling;
console.log(tag);
// var x = document.getElementById(tag);
let x=tag;
x.deleteRow(-1);//删除一行
}
function addcol(event) {
let ev = event || window.event,
tag=ev.target.parentNode.previousElementSibling;
console.log(tag);
var c = tag;//获取表格信息
var len = c.rows.length;//获得行数
var ro = c.rows[0].cells;
var len2 = ro.length;//获得列数
for (var i = 0; i < len; i++) {
var x = c.rows[i].insertCell(len2);//依次向每一行的末尾插入一个新列
x.innerHTML = " " + len2;
}
}
function delcol(event) {
let ev = event || window.event,
tag=ev.target.parentNode.previousElementSibling;
console.log(tag);
var c = tag;//获取表格信息
var len = c.rows.length;//获取表格的行数
var ro = c.rows[0].cells//获取表格的列数
var len2 = ro.length - 1;
for (var i = 0; i < len; i++) {
var x = c.rows[i].deleteCell(len2);//删除每一行末尾的单元格
}
}
</script>
</body>
</html>
添加、删除table表格中的行和列
最新推荐文章于 2024-07-08 16:22:29 发布