本文共 2375 字，大约阅读时间需要 7 分钟。
1、web开发的项目中我们做条件查询，数据添加，附件上传等功能时候需要给予用户更多的动态选择，这样就不能将<input />框的个数写死，所以动态操作表格式一个不错的选择！
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!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 > |