table 动态添加行删除行-优快云博客

本文介绍了一个基于Struts框架的电子政务系统用户管理界面实现，重点在于展示如何通过动态生成表格来管理用户兼职信息，并提供了增加和删除行的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<% @ 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;' οnclick='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;'  οnclick='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;'  οnclick='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