您的位置：首页 > Web前端 > JavaScript

使用JavaScript操作DOM动态增加删除表格

2017-09-13 19:02 1091 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>使用JavaScript操作DOM动态增加删除表格</title>

<script type="text/javascript">

//JavaScript通过DOM操作动态增加或者删除表格

//insertRow():增加新的一行, deleteCell():删除一列 insertCell():在指定位置插入一个td元素

var count=3;
function addrow(){
var table=document.getElementById("mytable");
var tr=table.insertRow();
var td1=tr.insertCell();
var td2=tr.insertCell();
var td3=tr.insertCell();
td1.innerHTML="MLDN-"+count;
td2.innerHTML="李兴华-"+count;
td3.innerHTML="<input type='button' value='-' onclick='deleterow(this);'>";
count++;
}
function deleterow(btn){
var tr=btn.parentNode.parentNode; //取得行节点
var table=document.getElementById("mytable");//取得表格
table.deleteRow(tr.rowIndex);//删除行
}

</script>

</head>

<body >
<input type="button" value="+" onclick="addrow();">
<table id="mytable" border="1">
<tr>
<td>MLDN-1</td>
<td>李兴华-1</td>
<td><input type="button" value="-" onclick="deleterow(this);"></td>
</tr>
<tr>
<td>MLDN-2</td>
<td>李兴华-2</td>
<td><input type="button" value="-" onclick="deleterow(this);"></td>
</tr>
</table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航