js书写信息添加列表

1. .odiv{
2.      width: 100%;
3.      height: 100px;
4. 
5.    }
6.    .odiv p{
7.      width: 200px;
8.      float: left;
9.      height: 30px;
10.       line-height: 30px;
11. 
12.     }
13.     .odiv input{
14.       width: 100px;
15.       height: 30px;
16.       text-indent: 10px;
17.     }
18.     .odiv p:last-child{
19.       width: 50px;
20.       height: 30px;
21.       text-align: center;
22.       line-height: 30px;
23.       border: 1px solid #999999;
24.       border-radius: 10px;
25.       cursor: pointer;
26.     }
27.     table span{
28.       cursor: pointer;
29.       display: block;
30.       background: #fff;
31.       margin: 0 auto;
32.       border: 1px solid #000;
33.       text-align: center;
34.       width: 80px;
35.       height: 20px;
36.       line-height: 20px;
37. 
38.     }

1. <div class="odiv">
2.      <p>
3.        姓名 ： <input type="text"  />
4.      </p>
5.      <p>
6.        年龄 ： <input type="text"  />
7.      </p>
8.      <p>
9.        生日 ： <input type="text"  />
10.       </p>
11.       <p class="add">
12.         添加
13.       </p>
14.     </div>
15. 
16.     <table width="400" height="50" border="1"  >
17.       <tr align="center" >
18.         <td>姓名</td>
19.         <td>年龄</td>
20.         <td>生日</td>
21.         <td><p>删除</p></td>
22.       </tr>
23.     </table>

1. var odiv=document.querySelector(".odiv")
2.    var oIn=document.querySelectorAll(".odiv input")
3.    var add=document.querySelector(".add")
4.    var table=document.querySelector("table")
5.    add.onclick=function(){
6.      // 获取当前文本 
7.      //姓名 
8.     var  name = oIn[0].value
9.     //年龄 
10.      var age =oIn[1].value
11.       // 生日
12.     var  birst = oIn[2].value
13. 
14. //    console.log(name +","+ age +","+ birst)
15.     // 创建节点 
16.     //创建tr 节点 
17.     var tr=document.createElement("tr")
18.     // 创建td 节点
19.     var td1 = document.createElement("td")
20.     var td2 = document.createElement("td")
21.     var td3 = document.createElement("td")
22.     var td4 = document.createElement("td")
23.     // 创建span 
24.     var ospan=document.createElement("span")
25.     ospan.innerHTML="删除"
26. 
27.     // 插入内容
28.     td1.innerHTML=name;
29.     td2.innerHTML=age;
30.     td3.innerHTML=birst; 
31. 
32. 
33.     // 插入节点 
34.     tr.appendChild(td1)
35.     tr.appendChild(td2)
36.     tr.appendChild(td3)
37.     td4.appendChild(ospan)
38.     tr.appendChild(td4)
39. 
40.     // 将tr插入到table
41. 
42.     table.appendChild(tr)
43. 
44. 
45.     //点击删除按钮时删除此栏 
46. 
47.     // 获取删除按钮 
48.     var del=document.querySelectorAll("table span")
49.       for (var i=0 ; i<del.length ; i++) {
50.         del[i].onclick=function(){
51.           this.parentNode.parentNode.remove()
52. 
53.         }
54. 
55.       }
56. 
57.     }