J2EE社区

苟有恒,何必三更起五更眠;
最无益,只怕一日曝十日寒.
posts - 241, comments - 318, trackbacks - 0, articles - 16

table 动态 添加行 删除行

Posted on 2010-12-22 12:08 xcp 阅读(4764) 评论(3)  编辑  收藏 所属分类: Javascript

 

<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!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>
    <base href="<%=basePath%>" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>泸州市机要局--电子政务协同应用系统</title>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/main/style-list.css"></link>
    <script type="text/javascript" src="<%=basePath%>js/lhgdialog/lhgdialog.js"></script>
</head>

<body>
    <div class="mainBox">
        <div class="searchBox" style="text-align: left;">
            <label>
                <input class="btnAll" onclick="addRow()" type="button" value="增加行" />
                <input class="btnAll" onclick="delMyRow()" type="button" value="删除行" />
            </label>    
        </div>
        <table class="borderTable" id="borderTable" border="0" cellpadding="0" cellspacing="0">
            <tr class="theadBg" id="title">
                <td>
                    <input id="all" type="checkbox" onclick="SelectAll()" style="cursor: pointer;"/>
                </td>
                <td style="width:160px;">所属区域</td>
                <td style="width:268px;">所属单位</td>
                <td style="width:140px;">所属部门</td>
                <td style="width:140px;">兼职职务</td>
                <td style="width:40px;">操作</td>
            </tr>
        </table>
    </div>
</body>
</html>
<script type="text/javascript">
    var P = window.parent, D = P.loadinndlg();
    window.onload = function(){
        P.crebtn( 'modify', '保 存', savePortTime); 
        addRow();
    }
    function savePortTime(){
    }
    
    
    var index = 1;
    var tb = $f("borderTable");
    var tbody;
    if(document.all){ //IE 
         tbody=tb.childNodes[0]
    }else{ //FIREFOX 
        tbody = getFirstChild(tb);
    } 
    
    function $f(id){
        return document.getElementById(id);
    }
    function getFirstChild(obj) {
        var result = obj.firstChild;
        while (!result.tagName) {
        result = result.nextSibling;
        }
        return result;
    }
    
    function addRow(){
        var trnew = createTr(index,"partTimeTr");
           try {
            tbody.appendChild(trnew);
               index++;
           }catch(err){
                alert("添加行出错!");
           }
    }
   function createTr(num,name){
      var trnew = document.createElement("tr");
      trnew.id=name+num;
      
      //选择框
      var td1 = document.createElement("td");
      td1.innerHTML = "<input type='checkbox' name='checkbox1' id='checkbox"+num+"' />";
      trnew.appendChild(td1);
      
      var td2 = document.createElement("td");
      td2.innerHTML = "<input type='text' name='regionName' id='regionName"+num+"' style='width:140px;' onclick='setDiv1("+num+")'/>"+
                        "<input type='hidden' name='regionModel' id='regionModel"+num+"'/>";
      trnew.appendChild(td2);
      
      var td3 = document.createElement("td");
      td3.innerHTML = "<input type='text' name='unitName' id='unitName"+num+"' style='width:230px;'  onclick='setDiv2("+num+")'/>"+
                        "<input type='hidden' name='unitModel' id='unitModel"+num+"' />";
      trnew.appendChild(td3);
      
      var td4 = document.createElement("td");
      td4.innerHTML = "<input type='text' name='departmentName' id='departmentName"+num+"' style='width:130px;'  onclick='setDiv3("+num+")'/>"+
                        "<input type='hidden' name='departmentModel' id='departmentModel"+num+"'";
      trnew.appendChild(td4);
      
      var td5 = document.createElement("td");
      td5.innerHTML = "<input type='text' name='userTitle' id='userTitle"+num+"'/>";
      trnew.appendChild(td5);
      
    
      var td6 = document.createElement("td");
      td6.innerHTML = "<input type='button' class='btnTxt' value='删除' onClick='delMyRow("+num+")'/>";
      trnew.appendChild(td6);
      
      return trnew;
   }
   function delMyRow(num){
           if (typeof(num) == "undefined"){
               var roleIds=document.getElementsByName("checkbox1");
            for(var i=roleIds.length-1;i>=0;i--){
                if(roleIds[i].checked){
                    var checkId = roleIds[i].id;
                    num = checkId.substr(8);
                    tbody.removeChild($f("partTimeTr"+num));
                }
            }
           }else{
               tbody.removeChild($f("partTimeTr"+num));
           }
    }
    
    
    function SelectAll(){
        var all = document.getElementById('all');
        var b = document.getElementsByName("checkbox1");
           if(all.checked){
               for(i=0;i<b.length;i++){
                   b[i].checked=true;
               }
           }else{
               for(i=0;i<b.length;i++){
                   b[i].checked=false;
               }
           } 
    } 
    
    
    function setDiv1(num) {
        D.lhgdialog.opendlg('选择所属区域','<%=basePath%>jsp/user/sysRegionTree.jsp?num='+num,240,450,true,false,'selectRegion');
    }
    
    function setDiv2(num) {
        var roleName = "<s:property value='#session.sysUser.roleName' />";
        var regionModel;
        if(roleName=="单位管理员"){
            regionModel = "<s:property value='#session.sysUser.unitModel' />";
        }else{
            regionModel = G('regionModel').value;
        }
        var unitModel = G('unitModel').value;
        if(regionModel==""){        
            alert("请先选择所属区域");
            document.getElementById("regionName").focus();
        }else{
            lhgdialog.opendlg('选择所属单位','<%=basePath%>jsp/user/sysUnitTree.jsp?regionModel='+regionModel+'&unitModel='+unitModel,400,500,true,false);
        }    
    }
    
    function setDiv3(num){
        var roleName = "<s:property value='#session.sysUser.roleName' />";
        var unitModel = "";
        if(roleName=="部门管理员"){
            unitModel = "<s:property value='#session.sysUser.departmentModel' />";
        }else{
            unitModel = G('unitModel').value;
        }
        var departmentModel = G('departmentModel').value;
        if(unitModel==""){        
            alert("请先选择所属单位");
            document.getElementById("unitName").focus();
        }else{
            lhgdialog.opendlg('选择所属部门','<%=basePath%>jsp/user/sysDepartmentTree.jsp?unitModel='+unitModel+'&departmentModel='+departmentModel,300,450,true,false);
        }
    }
</script>


名称: ♪4C.ESL | .↗Evon
口号: 遇到新问题♪先要寻找一个方案乄而不是创造一个方案こ
mail: 联系我

Feedback

# re: table 动态 添加行 删除行  回复  更多评论   

2010-12-22 13:13 by @joe
可以使用jquery的clone方法。

# re: table 动态 添加行 删除行  回复  更多评论   

2010-12-22 13:25 by xcp
@@joe
恩。好的

# re: table 动态 添加行 删除行  回复  更多评论   

2010-12-22 22:34 by huliqing
看看能不能兼容firefox,ie6,7,8,chrome,safari,opera吧。

只有注册用户登录后才能发表评论。
网站导航: