js书写信息添加列表 ；
先上效果图
首先看一下css样式表 写法
代码语言：javascript复制.odiv{
width: 100%;
height: 100px;
}
.odiv p{
width: 200px;
float: left;
height: 30px;
line-height: 30px;
}
.odiv input{
width: 100px;
height: 30px;
text-indent: 10px;
}
.odiv p:last-child{
width: 50px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #999999;
border-radius: 10px;
cursor: pointer;
}
table span{
cursor: pointer;
display: block;
background: #fff;
margin: 0 auto;
border: 1px solid #000;
text-align: center;
width: 80px;
height: 20px;
line-height: 20px;
}html写法
代码语言：javascript复制<div class="odiv">
<p>
姓名 ： <input type="text" />
</p>
<p>
年龄 ： <input type="text" />
</p>
<p>
生日 ： <input type="text" />
</p>
<p class="add">
添加
</p>
</div>
<table width="400" height="50" border="1" >
<tr align="center" >
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td><p>删除</p></td>
</tr>
</table>最后是我们的重点 js
代码语言：javascript复制var odiv=document.querySelector(".odiv")
var oIn=document.querySelectorAll(".odiv input")
var add=document.querySelector(".add")
var table=document.querySelector("table")
add.onclick=function(){
// 获取当前文本
//姓名
var name = oIn[0].value
//年龄
var age =oIn[1].value
// 生日
var birst = oIn[2].value
// console.log(name "," age "," birst)
// 创建节点
//创建tr 节点
var tr=document.createElement("tr")
// 创建td 节点
var td1 = document.createElement("td")
var td2 = document.createElement("td")
var td3 = document.createElement("td")
var td4 = document.createElement("td")
// 创建span
var ospan=document.createElement("span")
ospan.innerHTML="删除"
// 插入内容
td1.innerHTML=name;
td2.innerHTML=age;
td3.innerHTML=birst;
// 插入节点
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
td4.appendChild(ospan)
tr.appendChild(td4)
// 将tr插入到table
table.appendChild(tr)
//点击删除按钮时删除此栏
// 获取删除按钮
var del=document.querySelectorAll("table span")
for (var i=0 ; i<del.length ; i ) {
del[i].onclick=function(){
this.parentNode.parentNode.remove()
}
}
}
