JS动态操作表格

精选原创

小夜的传说 2014-06-19 14:44:52 ©著作权

文章标签 js增加删除<tr> js动态操作表格 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者小夜的传说的原创作品，请联系作者获取转载授权，否则将追究法律责任

【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>";//通过jquery获取一个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标记代码这是jquery外部插入，内部插入$("#tableid").append(trObj);   
    }
    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="#" onclick="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 onclick="AddSignRow()" href="javascript:void(0)" >创建</a></div>
</div>
</body>
</html>