脚本给TABLE 添加 删除 行的操作DEMO
来源：互联网 发布：成谋商城网络传销 编辑：程序博客网 时间：2024/06/06 19:53
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script>//给table增加一行function addTableRow() { var table1 = document.getElementById('table1'); var cloneTab = document.getElementById('table2'); //alert(cloneTab.firstChild.firstChild.innerHTML); //alert(cloneTab.firstChild.firstChild.cloneNode(true).innerHTML); table1.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true)); var v= table1.firstChild.childNodes; var len = v.length; for(var i=1;i<len;i++){ v[i].childNodes[0].firstChild.id=i;//给第一个单元格id赋值 }}//给table删除一行function delTableRow(){ var table1 = document.getElementById('table1'); var isChecked = document.getElementsByName('isChecked'); var len = isChecked.length; for(var i=len-1;i>=0;i--){ if(isChecked[i].checked==true){ table1.firstChild.removeChild(isChecked[i].parentNode.parentNode); //alert(isChecked[i].id); //alert(isChecked[i].parentNode.parentNode.innerHTML); } }}</script> </head> <body> <div><div style="float: left; WIDTH: 99%; position: relative;"> <table id="table1" width="99%" cellspacing="1" cellpadding="1" border="0" bgcolor="#336699" align="left" style="margin-top:10px;"> <tr bgcolor="#6699CC" align="center"style="font-weight: bold;"><td class="pt12-wh" width="10%" height="25">选择</td><td class="pt12-wh" width="15%" height="25">检测</td><td class="pt12-wh" width="15%" height="25"> 容限/范围</td><td class="pt12-wh" width="20%" height="25">检测方法</td><td class="pt12-wh" width="20%" height="25">检查部门</td><td class="pt12-wh" width="10%" height="25">频率</td><td class="pt12-wh" width="10%" height="25">结果</td></tr> </table> </div> </div> <!--控制table的按钮--> <div style="width: 99%; text-align: right; margin-top: 10px; margin-bottom: 2px; float: left"> <input type="button" value="增加" onclick= "addTableRow();"/> <input type="button" value="删除" onclick="delTableRow();"/> <!--模板table也叫做clone table style = "display:none"--> <table id='table2' style="display: none"> <tr> <th bgcolor="white" class="pt12-black" align="center"><input type="checkbox" name="isChecked" /><input type="hidden" size="6" value=""/></th> <th nowrap="nowrap" bgcolor="white" class="pt12-black" align="center"><input name="detection" type="text" /></th> <th nowrap="nowrap" bgcolor="white" class="pt12-black" align="center"><input name="scope" type="text" /></th> <th nowrap="nowrap" bgcolor="white" class="pt12-black" align="center"><input name="detectmethod" type="text" /></th> <th nowrap="nowrap" bgcolor="white" class="pt12-black" align="center"><input name="inspectiondepart" type="text" /></th> <th nowrap="nowrap" bgcolor="white" class="pt12-black" align="center"><input name="rate" type="text" size="10"/></th> <th nowrap="nowrap" bgcolor="white" class="pt12-black" align="center"><select size="1" id="inspectresult" name="inspectresult"> <option value="合格">合格</option> <option value="不合格">不合格</option> </select></th> </tr> </table> </div> </body></html>
