当前位置： 代码迷 >> Web前端 >> 脚本给TABLE 平添 删除 行的操作DEMO
  详细解决方案

脚本给TABLE 平添 删除 行的操作DEMO

热度：429   发布时间：2012-11-09 10:18:48.0
脚本给TABLE 添加 删除 行的操作DEMO
<%@ 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>

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.