详解JS动态操作表格

最新推荐文章于 2022-07-25 23:30:05 发布

古越剑箫

最新推荐文章于 2022-07-25 23:30:05 发布

阅读量690

点赞数

分类专栏：【JS】文章标签： js动态操作表格 js删除tr js增加tr web开发 jquery

本文链接：https://blog.csdn.net/u010506940/article/details/32328327

版权

【JS】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【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>

古越剑箫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解JS动态操作表格

【JS】☆★之详解动态操作表格1、web开发的项目中我们做条件查询，数据添加，附件上传等功能时候需要给予用户更多的动态选择，这样就不能将<input />框的个数写死，所以动态操作表格式一个不错的选择！无标题文档 function AddSignRow(){ /*var str2=document.getElementById("trid").innerH
复制链接

扫一扫

专栏目录