一个可动态编辑多条数据的JS

    技术2022-05-11  148

    <!--    /**    * 增加一行数据    */    function dataGridAdd(templet, dataGrid, rowCountHolder, rowName, colArray)    {        var ListSumEx = rowCountHolder.value;        ListSumEx++;        var temp = dataGrid;        temp.insertRow(temp.rows.length);        temp.rows[temp.rows.length -1].insertCell(0);        var sHTML;        sHTML=templet.innerHTML;        sHTML=Replace(sHTML,rowName + "0",rowName+ListSumEx);//行数据表名称ListTbEx        if(ListSumEx%2 == 0){//交替颜色设置          sHTML=Replace(sHTML,"list-tr1","list-tr2");        }        else{          sHTML=Replace(sHTML,"list-tr2","list-tr1");        }        //替换没一列        for(var c = 0; c < colArray.length; c++) {            sHTML=Replace(sHTML,colArray[c] + "0",colArray[c]+ListSumEx);        }        temp.rows[temp.rows.length-1].cells[0].innerHTML=sHTML;        rowCountHolder.value = ListSumEx;    }    /**     * 删除一行数据     */    function dataGridDelete(deltRow, dataGrid, rowCountHolder, rowName, colArray)    {        var sHTML;        var temp = dataGrid;        if (rowCountHolder.value<1)        {            return;        }        var fix = 0;        for (var j=0;j<temp.rows.length;j++)        {            var chdID = getChlidID(temp.rows[j]);            if(chdID == null || chdID =="") {                fix++;//不是要检查的            } else if (chdID==deltRow){                for (var a=j+1;a<temp.rows.length;a++){                    sHTML=temp.rows[a].cells[0].innerHTML;                    sHTML=Replace(sHTML,rowName+(a - fix),rowName+(a - (1 + fix)));                    if(sHTML.indexOf("list-tr1")!=-1){                        sHTML=Replace(sHTML,"list-tr1","list-tr2");                    } else{                        sHTML=Replace(sHTML,"list-tr2","list-tr1");                    }                    //替换每一列                    for(var c = 0; c < colArray.length; c++) {                       sHTML=Replace(sHTML,colArray[c]+(a - fix),colArray[c]+(a - (1 + fix)));                    }                    temp.rows[a].cells[0].innerHTML=sHTML;                }                temp.deleteRow(j);            }        }        rowCountHolder.value = rowCountHolder.value-1;    }    /**     * 字符串替换     * Sstring innerHTML对象     * Cstring 被替换的字符串     * Dstring 目的字符串     */    function Replace(Sstring,Cstring,Dstring)    {        var blength=Cstring.length;        var firstbyte=Sstring.indexOf(Cstring,0);        for (var i=0;i<=Sstring.length-blength;i++)        {            tstring=Sstring.substring(i,i+blength);            if (tstring==Cstring)            {                Sstring=Sstring.substring(0,i)+Dstring+Sstring.substring(i+blength,Sstring.length);            }        }        return Sstring;    }    /**     * 获取子节点的id     */    function getChlidID(par) { var chd = par.cells[0].childNodes; for(var i=0; i<chd.length; i++){       if(chd[i].tagName=='TABLE'){                return chd[i].id;            }        }    }-->

     

    VLanConfig.jsp

    <%@page contentType="text/html; charset=UTF-8"%><%@page import="java.util.*,com.cnunisoft.uma.tableobject.v_cfgchghist,com.cnunisoft.uma.action.ParameterTools,java.text.*"%><%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%><%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%><%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%><html><head><link href="../Resource/style/style1.css" _fcksavedurl=""../Resource/style/style1.css"" _fcksavedurl=""../Resource/style/style1.css"" rel="stylesheet" type="text/css"><script type="text/javascript" language="javascript" src="../Resource/Js/DataGridEdit.js"></script><title>VLAN管理</title></head><body class="body"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">  <tr>    <%@include file="../includeLeft.jsp"%> <td valign="top" class="ob-bc"> <table width="100%" border="0" cellpadding="2" cellspacing="1" class="form-table">        <tr align="center" valign="top">          <td class="tab-head">     <table width="100%" height="100%" cellpadding="0" cellspacing="0">              <tr class="text-title">                <td class="text-title" width="60%" colspan="6" valign="top"><div align="left">VLAN配置</div></td>              </tr>            </table>    </td>        </tr>      </table>      <table width="100%" border="0" cellpadding="0" cellspacing="0">  <tr align="center" valign="top" class="list-tr1">   <td width="35%" align="right">      VLAN号</td>   <td width="65%" align="left">      <input type="text" name="ip"></td>  </tr>  <tr align="center" valign="top" class="list-tr2">   <td width="35%" align="right">      描述</td>   <td width="65%" align="left">   <textarea name="desc">   </textarea>   </td>  </tr>

            <tr align="center">          <td colspan="2">    <table width="100%" height="100%" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">

         <!--交换机信息 开始-->              <tr align="center" class="tab-title1">                <td class="tab-head"><table width="100%" height="100%" cellpadding="0" cellspacing="0">                    <tr class="text-title">                      <td class="text-title" width="60%" colspan="6" valign="top"><div align="left">交换机</div></td>                    </tr>                  </table></td>              </tr>     <tr class="list-tr1">      <td>     <table width="100%" id="dataGrid1" height="100%" cellpadding="0" cellspacing="0">      <tr>        <td>        <table align="center" class="tab-title" width="100%">         <tr align="center">        <td width="80%" class=tab-title>网络交换机</td>        <td width="20%" class=tab-title>删除</td>         </tr>       </table>        </td>       </tr>        <tr style="display:none">         <td id="ListItem">         <table align="center" id="ListTb0" class="dg-tr">           <tr class="list-tr1">          <td width="80%" align="center" style="border-right:1px solid;">            <select name="switch0">          <option value="1">192.168.1.254</option>          <option value="2">UDP</option>           </select>          </td>          <td width="20%" align="Center">          <a href="#" _fcksavedurl=""#"" onClick="if(confirm('是否确定删除?')){dataGridDelete('ListTb0', document.all.dataGrid1, document.all.switchnum, 'ListTb', new Array('switch'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>          </td>           </tr>         </table>       </td>        </tr>     </table>    </td>     </tr>              <tr align="center" class="tab-foot">                <td colspan="5"><input name="addswitch" type="button" class="button" value="增加交换机" OnClick="dataGridAdd(ListItem, document.all.dataGrid1, document.all.switchnum, 'ListTb', new Array('switch'))">                </td>              </tr>              <tr align="center" class="list-tr1">                <td colspan="5">                   </td>              </tr>          <!--交换机信息 结束-->

         <!--部门信息 开始-->              <tr align="center" class="tab-title1">                <td class="tab-head"><table width="100%" height="100%" cellpadding="0" cellspacing="0">                    <tr class="text-title">                      <td class="text-title" width="60%" colspan="6" valign="top"><div align="left">部门</div></td>                    </tr>                  </table></td>              </tr>          <tr class="list-tr1">      <td>     <table width="100%" id="dataGrid2" height="100%" cellpadding="0" cellspacing="0">      <tr>        <td>        <table align="center" class="tab-title" width="100%">         <tr align="center">        <td width="80%" class=tab-title>部门</td>        <td width="20%" class=tab-title>删除</td>         </tr>       </table>        </td>       </tr>        <tr style="display:none">         <td id="DepItem">         <table align="center" id="DepTb0" class="dg-tr">           <tr class="list-tr1">          <td width="80%" align="center" style="border-right:1px solid;">            <select name="dep0">          <option value="1">部门一</option>          <option value="2">部门二</option>           </select>          </td>          <td width="20%" align="Center">          <a href="#" onClick="if(confirm('是否确定删除?')){dataGridDelete('DepTb0', document.all.dataGrid2, document.all.depnum, 'DepTb', new Array('dep'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>          </td>           </tr>         </table>       </td>        </tr>     </table>    </td>     </tr>                        <tr align="center" class="tab-foot">                <td colspan="5">     <input name="adddep" type="button" class="button" value="增加部门" onClick="dataGridAdd(DepItem, document.all.dataGrid2, document.all.depnum, 'DepTb', new Array('dep'))">                </td>              </tr>              <tr align="center" class="list-tr1">                <td colspan="5">                   </td>              </tr>               <!--部门信息 结束-->

         <!--用户信息 开始-->     <tr align="center" class="tab-title1">                <td class="tab-head">     <table width="100%" height="100%" cellpadding="0" cellspacing="0">      <tr class="text-title">        <td class="text-title" width="60%" colspan="6" valign="top"><div align="left">用户</div></td>      </tr>                   </table>    </td>              </tr>     <tr class="list-tr1">      <td>     <table width="100%" id="dataGrid3" height="100%" cellpadding="0" cellspacing="0">      <tr>        <td>        <table align="center" class="tab-title" width="100%">         <tr align="center">        <td width="80%" class=tab-title>用户</td>        <td width="20%" class=tab-title>删除</td>         </tr>       </table>        </td>       </tr>        <tr style="display:none">         <td id="UserItem">         <table align="center" id="UserTb0" class="dg-tr">           <tr class="list-tr1">          <td width="80%" align="center" style="border-right:1px solid;">            <select name="user0">          <option value="1">卖要良</option>          <option value="2">张一隆</option>           </select>          </td>          <td width="20%" align="Center">          <a href="#" onClick="if(confirm('是否确定删除?')){dataGridDelete('UserTb0', document.all.dataGrid3, document.all.usernum, 'UserTb', new Array('user'));}else{return false;}"> <img src="../Resource/Images/deleteicon.gif" border="0" width="13" height="17" alt="删除"></a>          </td>           </tr>         </table>       </td>        </tr>     </table>    </td>     </tr>             <tr align="center" class="tab-foot">                <td colspan="5">     <input name="adduser" type="button" class="button" value="增加用户" onClick="dataGridAdd(UserItem, document.all.dataGrid3, document.all.usernum, 'UserTb', new Array('user'))">                </td>              </tr>     <!--用户信息 结束-->

                  <tr align="center" class="tab-foot">                <td colspan="5">        <input type="hidden" name="switchnum" value="0">     <input type="hidden" name="depnum" value="0">     <input type="hidden" name="usernum" value="0">     <input name="save" type="button" class="button" value="保  存">                   <input name="ret" type="button" class="button" value="返  回">    </td>              </tr>            </table></td>        </tr>    </table></td>  </tr>  <tr>    <td height="30" colspan="3" class="copy" valign="bottom"><%@include file="../copyRight.inc"%>    </td>  </tr></table></body></html>


    最新回复(0)