1、table表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>表单的添加查询删除</title>
<script type="text/javascript">
//添加
//获取输入的数据
function a(){
var tb = document.getElementById("t");
var xu = document.getElementById("xuhao").value;
var name = document.getElementById("xingming").value;
//避免重复插入
//若序号一致，则不能添加
if(tb.innerText.indexOf(xu)>=0){
alert("该序号重复，请重新添加");
return false;
}
if(tb.innerText.indexOf(name)>=0){
alert("该名字已存在,请重新添加");
return false ;
}
//插入一行
var art = tb.insertRow();
//插入单元格
var tb1 = art.insertCell();
var tb2 = art.insertCell();
var tb3 = art.insertCell();
var tb4 = art.insertCell();
tb1.innerText = xu;
tb2.innerText = name;
tb3.innerHTML = "<span onclick='delrow(this)'>删除</span>"
tb3.innerHTML = "<span onclick='update(this)'>修改</span>"
}
//删除功能
function delrow(elm){
elm.parentElement.parentElement.remove();
}
//修改功能
function update(elm){
elm.parentElement.parentElement.replaceNode();
}
</script>
</head>
<body>
<table id="t" cellspacing="0" border="1" width="400px">
<tbody>
<tr>
<td>序号</td>
<td>姓名</td>
<td>删除该人物</td>
<td>修改改人物数据</td>
</tr>
<tr>
<td>1</td>
<td>唐僧</td>
<td><span onclick="delrow(this)">删除</span></td>
<td><span onclick="update(this)">修改</span></td>
</tr>
<tr>
<td>2</td>
<td>孙悟空</td>
<td><span onclick="delrow(this)">删除</span></td>
<td><span onclick="update(this)">修改</span></td>
</tr>
</tbody>
</table>
<form>
<p>序号：<input id="xuhao" type="text"></p>
<p>姓名：<input id="xingming" type="text"></p>
<p><button type="button" id="add" onclick="a()">添加</button>
<!--<button type="button" id="upd" onclick="u()">修改</button>--></p>
</form>
</body>
</html>