首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。
如图:
对应的html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="js/editTable.js" language="javascript"></script>
</head>
<body>
<input type="button" value="新增" onclick="createRow()">
<input type="button" value="删除" onclick="delRow()">
<table id="editTable" border="1" width="800">
<tr>
<th>选择</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
</body>
</html>
————————————————
版权声明:本文为CSDN博主「summerhmy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/summerhmy/article/details/82892271
然后我们编写javascript脚本完成动态增加行的操作:
function createRow(){
var editTable=document.getElementById("tbody");
var tr=document.createElement("tr");
var td0=document.createElement("td");
var checkbox=document.createElement("input");
checkbox.type="checkbox";
checkbox.name="checkRow";
td0.appendChild(checkbox);
var td1=document.createElement("td");
td1.innerHTML="<input type='text' />";
var td2=document.createElement("td");
td2.innerHTML="a2";
var td3=document.createElement("td");
td3.innerHTML="a3";
tr.appendChild(td0);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
editTable.appendChild(tr);
————————————————
版权声明:本文为CSDN博主「summerhmy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/summerhmy/article/details/82892271
创建tr和td元素,增加行。
效果:
在编写删除按钮的javascript脚本
function delRow(){
var editTable=document.getElementById("tbody");
if(confirm("确认删除所选?")){
var checkboxs=document.getElementsByName("checkRow");
for(var i=0;i<checkboxs.length;i++){
if(checkboxs[i].checked){
var n=checkboxs[i].parentNode.parentNode;
editTable.removeChild(n);
i--;
}
}
}
}
————————————————
版权声明:本文为CSDN博主「summerhmy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/summerhmy/article/details/82892271
效果:
动态生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#t1 tr td{width: 100px;height: 30px;}
.box0{background-color: white;}
.box1{background-color: #dcdcdc;}
</style>
<script>
window.onload = function(){
var oRow = document.getElementById("row");
var oCol = document.getElementById("col");
var oBtn = document.getElementById("btn1");
var oT1 = document.getElementById("t1");
//给表格上的事件按钮添加事件委托
oT1.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
if(target.nodeName.toLowerCase() == 'button')
{
oT1.removeChild(target.parentNode.parentNode);
}
}
oBtn.onclick = function(){
if(!oRow.value || !oCol.value)
{
alert("请输入对应的行列!");
}else{
for(var i=0;i<oRow.value;i++){
var oTr = document.createElement("tr");
oTr.className = 'box' + (i % 2);
for(var j=0;j<oCol.value;j++){
var oTd = document.createElement("td");
oTr.appendChild(oTd);
}
var oClose = document.createElement("td");
oClose.innerHTML = "<button>删除</button>";
oTr.appendChild(oClose);
oT1.appendChild(oTr);
}
}
}
}
</script>
</head>
<body>
<input type="text" placeholder="行" id="row"/>
<input type="text" placeholder="列" id="col"/>
<button id="btn1">生成</button>
<table id ='t1' border = '1'>
</table>
</body>
</html>
————————————————
版权声明:本文为CSDN博主「东方求败、」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wang_swa99er/article/details/120270911
JavaScript动态向表格添加数据
利用javascript ,动态向表格中添加数据
- 首先先写出表格的表头和主干部分
<table width="600" border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbMain"></tbody>
</table>
————————————————
版权声明:本文为CSDN博主「ChauncyWu」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ChauncyWu/article/details/54695740
- 接下来就是网表格里面添加数据,这里用的是原生javascript
<script type="text/javascript">
//模拟一段JSON数据,实际要从数据库中读取
var per = [
{id:001,name:'张珊',job:'学生'},
{id:002,name:'李斯',job:'教师'},
{id:003,name:'王武',job:'经理'}
];
window.onload = function(){
var tbody = document.getElementById('tbMain');
for(var i = 0;i < per.length; i++){ //遍历一下json数据
var trow = getDataRow(per[i]); //定义一个方法,返回tr数据
tbody.appendChild(trow);
}
}
function getDataRow(h){
var row = document.createElement('tr'); //创建行
var idCell = document.createElement('td'); //创建第一列id
idCell.innerHTML = h.id; //填充数据
row.appendChild(idCell); //加入行 ,下面类似
var nameCell = document.createElement('td');//创建第二列name
nameCell.innerHTML = h.name;
row.appendChild(nameCell);
var jobCell = document.createElement('td');//创建第三列job
jobCell.innerHTML = h.job;
row.appendChild(jobCell);
//到这里,json中的数据已经添加到表格中,下面为每行末尾添加删除按钮
var delCell = document.createElement('td');//创建第四列,操作列
row.appendChild(delCell);
var btnDel = document.createElement('input'); //创建一个input控件
btnDel.setAttribute('type','button'); //type="button"
btnDel.setAttribute('value','删除');
//删除操作
btnDel.οnclick=function(){
if(confirm("确定删除这一行嘛?")){
//找到按钮所在行的节点,然后删掉这一行
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
//btnDel - td - tr - tbody - 删除(tr)
//刷新网页还原。实际操作中,还要删除数据库中数据,实现真正删除
}
}
delCell.appendChild(btnDel); //把删除按钮加入td,别忘了
return row; //返回tr数据
}
</script>
————————————————
版权声明:本文为CSDN博主「ChauncyWu」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ChauncyWu/article/details/54695740
- 网页测试
4.
显示成功,点击删除按钮,并确定即可删除这一行
删除第二行,可以!