表格增加和删除指定行
2017-04-16 本文已影响16人
silingling
效果图
题目：按create键将上面填写的相应信息增加到表格中，按delete键将指定行删除。
整体思路：
- 先用HTML将文档写好，创建三个input输入框和一个create按钮以及一个table表格。
- 添加信息。 然后用JS通过
document.getElementById()拿到相应的文本框的值，在create按钮上添加一个onclick()事件来动态增加表格的行和列。首先var oTr=document.createElement('tr');创建一行，然后用var oTd=document.createElement('td')创建四列，把每个文本框的值通过oTd.innerHTML来加到列中，再通过oTr.appendChild(oTd)将相应列增加到一行中，最后通过tabEle.appendChild(oTr)将行增加到表格中。 - 删除指定行。只需要在创建的按钮后面写一个
onclick()事件，通过oTr.remove(this);来删除指定行，this代表本行。
特别注意的是：
创建按钮时的写法为：
var oTd=document.createElement('td');
var button=document.createElement('button');
button.onclick=function(){
oTr.remove(this);
}
var text=document.createTextNode('delete');
button.appendChild(text);
oTd.appendChild(button);
oTr.appendChild(oTd);
而不能像下面这样写：
var deleEle=document.createElement("input");
deleEle.type="button";
deleEle.value="delete";
oTd.appendChild(deleEle);
否则只有最后一行才能添加上按钮，前面创建的按钮会自动消失，注意语法规则。
整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var nameEle=document.getElementById("name");
var ageEle=document.getElementById("age");
var sexEle=document.getElementById("sex");
var buttEle=document.getElementById("cre");
var tabEle=document.getElementById("tab");
buttEle.onclick=function(){
var oTr=document.createElement('tr');//创建一个tr
//创建第一个td
var oTd=document.createElement('td')
oTd.innerHTML=nameEle.value;
oTr.appendChild(oTd);//将td插入tr
//创建第二个td
var oTd=document.createElement('td');
oTd.innerHTML=ageEle.value;
oTr.appendChild(oTd);//将td插入tr
//创建第三个td
var oTd=document.createElement('td');
oTd.innerHTML=sexEle.value;
oTr.appendChild(oTd);//将td插入tr
//创建第四个td
var oTd=document.createElement('td');
var button=document.createElement('button');
button.onclick=function(){
oTr.remove(this);
}
var text=document.createTextNode('delete');
button.appendChild(text);
oTd.appendChild(button);
oTr.appendChild(oTd);
tabEle.appendChild(oTr);//将整个tr插入到表格中
}
}
</script>
</head>
<body>
<form method="post">
Name:<input type="text" id="name"/><br>
Age:<input type="text" id="age"><br>
Sex:<input type="text" id="sex"><br>
<input type="button" value="create" id="cre"><br>
<!--<input type="button" value="delete" id="dele">-->
<table border="1" cellspacing="0" id="tab" width="300px">
<tr><td>Name</td><td>Age</td><td>Sex</td><td>delete</td></tr>
</table>
</form>
</body>
</html>
