【JS】☆★之详解动态操作表格
1、web开发的项目中我们做条件查询,数据添加,附件上传等功能时候需要给予用户更多的动态选择,这样就不能将<input />框的个数写死,所以动态操作表格式一个不错的选择!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jQuery/jquery-1.6.2.js"></script>
<script type="text/javascript">
function AddSignRow(){
/*var str2=document.getElementById("trid").innerHTML;//这是通过js获取的一个tr中的所有元素
alert(str2);*/
var trObj="<tr >"+$("#trid").html()+"</tr>";//拼成一个tr
var str=$("#tableid").find("tr").length;//获取table中tr总行数
if(str==11){//假如tr长度为11,也就是说,去掉第一个tr,还有10个tr的时候,停止增长,意思是最多只能新增10个tr
return;
}
$("#trid").after(trObj);//在这个<tr段落>之后插入一个HTML标记代码,<span style="background-color: rgb(250, 250, 250); "><span style="color:#ff0000;">这是jquery外部插入,内部插入$("#tableid").append(trObj); </span></span>
}
function deleteRow(obj){
var str=$("#tableid").find("tr")[1];//获取table表中的所有tr,然后取第2个,因为是0,1,2,3
var tr=obj.parentNode.parentNode; //获取obj代表是<a> 上一个父节点是<td> 再上就是<tr>
if(str==tr){ //加入获取的obj的再上父节点是第二个tr 不允许删除
return;
}
var tbody=tr.parentNode; //获取tr的父节点
tbody.removeChild(tr); //tr的父节点(tbody)移除tr
}
</script>
</head>
<body>
<div class="body_context" align="center">
<div class="table_context">
<table width="80%" border="1" cellspacing="0" cellpadding="0" id="tableid">
<thead>
<tr>
<th>姓名</th><th>照片</th><th>职业</th><th>操作</th>
</tr>
</thead>
<tr id="trid">
<td><input type="text" name="" value="" style="border:0px;"/></td>
<td><input type="file" name="" value="" style="border:0px;"/></td>
<td><input type="text" name="" value="" style="border:0px;"/></td>
<td><a href="#" οnclick="deleteRow(this)" style="text-decoration:none;">移除</a></td>
</tr>
</table>
</div>
<div style="border-bottom: 1px solid #088000;margin-bottom: 10px;margin-top:10px;width:80%;" ></div>
<div style="padding-left:0px;padding-top:5px;"><a οnclick="AddSignRow()" href="javascript:void(0)" >创建</a></div>
</div>
</body>
</html>