jquery动态增删行

最新推荐文章于 2021-05-08 11:09:08 发布

原创最新推荐文章于 2021-05-08 11:09:08 发布 · 783 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

14 篇文章

订阅专栏

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="page" uri="/WEB-INF/tlds/paginated.tld"%>
<%@ taglib prefix="priveliege" uri="/WEB-INF/tlds/priveliege.tld"%>
<%@ include file="../common/language.jsp" %>
<!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>
<title>choose_path</title>
<%@ include file="../common/commonJS.jsp" %>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../jsCBB/jquery.js"></script>
<link href="../style/base<%=language_css%>.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/Calendar/WdatePicker.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/ex.jquery.validate.js"></script>
<script type="text/javascript" src="../js/dialogShow.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
   //增加行
   $("#addLine").click(function(){
               var $table=$("#dynamicTable tr");
               var index=$table.length - 1;
               $("#dynamicTable").append("<tr id=\"" + index + "\">" +
                   "<td scope=\"col\">" + "<input type=\"text\" name=\"areaIps[" + index + "].beginip\" id=\"areaIps[" + index + "].beginip\" />" + "<span class=\"need_star\">*</span>" + "</td>" +
                   "<td scope=\"col\">" +
                   "<input type=\"text\" name=\"areaIps[" + index + "].endip\" id=\"areaIps[" + index + "].endip\" />" + "<span class=\"need_star\">*</span>" + "</td>" +
                   "<td scope=\"col\" class=\"last_col\" colspan=\"2\">" + "<div class=\"data_b\">" +
                   "<input type=\"button\" title=\"<s:text name="msg.portalMS.zone.area.ip.del" />\" value=\"<s:text name="msg.portalMS.zone.area.ip.del" />\" onclick=\"deltr(" + index + ")\" />" + "</div>" + "</td>" +
               "</tr>");
   });
});

//返回区域列表
function viewZone(){
   var url = "../SysManage/viewZone.action?queryFlag=true";
   window.location=url;
}

function deltr(index) {
   $table=$("#dynamicTable tr");
   //减2是因为表格第2行是从0开始计算
   var len = $table.length - 2;
   if(index>len) {
       return;
   } else {
       //把后面的数据往前移，删除最后一行
       for(var temp=index; temp<len; temp++){
           //业务入口栏目名称
           var currentColumnNameIndex = "areaIps[" + temp + "].beginip";
           var nextColumnNameIndex = "areaIps[" + (temp+1) + "].beginip";
           document.getElementById(currentColumnNameIndex).value = document.getElementById(nextColumnNameIndex).value;
           //业务入口栏目编码
           var currentColumnCodeIndex = "areaIps[" + temp + "].endip";
           var nextColumnCodeIndex = "areaIps[" + (temp+1) + "].endip";
           document.getElementById(currentColumnCodeIndex).value = document.getElementById(nextColumnCodeIndex).value;
       }
       $("tr[id=\'" + len + "\']").remove();
   }
}

function showErrmsg(msg,color,id)
{
   var lo=document.getElementById(id);
   var p=lo.parentNode;
   while(p.lastChild!=lo)
   {
       p.removeChild(p.lastChild);
   }
   if(msg!="")
   {
       if(p.lastChild==lo)
       {
           var spanNew = document.createElement("span");// 创建span
           spanNew.id = id + "aa";// 生成spanid
           spanNew.style.color = color;
           spanNew.appendChild(document.createTextNode(msg));// 给span添加内容
           var inputId = document.getElementById(id);
           inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);//
       }
   }
}

function checkIps()
{
   $table=$("#dynamicTable tr");
   //减1是因为表格从第2行开始，长度要减1
   var len = $table.length - 1;
   var result=true;
   var obj=document.getElementById("businessAreaCode").value;
   if(obj==null||obj=="")
   {
       showErrmsg("<s:text name='msg.portalMS.zone.code.required'/>","red","businessAreaCode");
       result= false;   }
   var exp=/[A-Za-z0-9_]+$/;
   var res = obj.match(exp);
   if(res==null)
   {
       showErrmsg("<s:text name='msg.portalMS.zone.areacode.error.tip'/>","red","businessAreaCode");
       result= false;
   }
   else
   {
       showErrmsg("<s:text name='msg.portalMS.location.areacode.tip'/>","gray","businessAreaCode");
   }
   /****/
   var businessAreaName=document.getElementById("businessAreaName").value;
   if(businessAreaName==null||businessAreaName=="")
   {
       showErrmsg("<s:text name='msg.portalMS.zone.areaname.error.tip'/>","red","businessAreaName");
       result= false;
   }
   else{
       showErrmsg("<s:text name='msg.portalMS.zone.areaname.error.tip1'/>！","gray","businessAreaName");
   }
   if(len<=0)
   {
       result=false;
       //alert("<s:text name='msg.portalMS.location.no.ip.tip'/>");
       showText('<s:text name="msg.portalMS.page.message.tip"/>','<s:text name="msg.portalMS.location.no.ip.tip"/>',400,200,0,true);
   }
   var startid=""
   var endid="";
   var flag=true;
   var alertFlag=false;
   for(var i=0;i<len;i++)
   {
       flag=true;
       startid = "areaIps[" + i + "].beginip";
       if(!checkIp(startid))
       {
           setStyle(startid);
           result=false;
           flag=false;
       }
       else{
           cancelStyle(startid);
       }
       endid = "areaIps[" + i + "].endip";
       if(!checkIp(endid))
       {
           setStyle(endid);
           result=false;
           flag=false;
       }
       else{
           cancelStyle(endid);
       }
       //如果IP合法，则判定IP大小
       if(flag)
       {
           var comp=checkIpOrder(startid,endid);
           if(!comp)
           {
               setStyle(startid);
               setStyle(endid);
               result=false;
               alertFlag=true;
           }
       }
   }
   if(alertFlag)
   {
       alert("<s:text name='msg.portalMS.location.endip.valid'/>");
   }
   return result;
}
function checkIpOrder(sId,eId)
{
   var start=document.getElementById(sId).value;
   var end=document.getElementById(eId).value;
   var temp1;
    var temp2;
    temp1 = start.split(".");
    temp2 = end.split(".");
    for (var i = 0; i < 4; i++)
    {
        if(temp1[i].length<temp2[i].length)
        {
            return true;
        }
        else if(temp1[i].length>temp2[i].length) {
            return false;
        }
        else
        {
           if (temp1[i]>temp2[i])
           {
                 return false;
              }
           else if (temp1[i]<temp2[i])
           {
               return true;
           }
        }
    }
    return false;
}

function setStyle(id) //设置输入域的样式#cc0000
{
   document.getElementById(id).style.borderColor = '#FF0000';
    document.getElementById(id).style.backgroundColor = '#F5DCDC';
               // document.all[id].focus();
}

function cancelStyle(id) //恢复输入域的样式
{
    document.getElementById(id).style.borderColor = '';
    document.getElementById(id).style.backgroundColor = '';
}

function checkIp(id)
{
   var obj=document.getElementById(id).value;
   if(obj==null||obj=="")
   {   return false;   }
   var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
   var reg = obj.match(exp);
   if(reg==null)
   {
       /** ip不合法**/
       return false;
   }
   else
   {
       /** ip合法**/
       return true;
   }
}

</script>

</head>

<body>
   <div class="r_main">
   
   <div class="r_nav"><div class="left"><img src="../images/nav_l.gif" width="5" height="29" /></div>
   <div class="ct"><s:text name="msg.portalMS.rolemgr.current.position" /> <s:text name="msg.portalMS.sysmgr.name" /> > <s:text name="msg.portalMS.sysmgr.zone.manage" /> > <s:text name="msg.portalMS.sysmgr.zone.manage.add" /></div>
   <div class="right"><img src="../images/nav_r.jpg" width="5" height="29" /></div>
   </div>
   <div class="info_tit">
    <div class="left"><s:text name="msg.portalMS.sysmgr.zone.manage.add" /></div>
</div>
<div class="page_tb">
       <s:form theme="simple" onsubmit="return checkIps();" action="addZone" namespace="/SysManage" >
           <table width="100%" border="0" cellpadding="0" cellspacing="0" class="in_table long">
           <tr>
           <td   class="col1 must"><s:text name="msg.portalMS.sysmgr.zone.name.colon" /></td>
           <td><s:textfield id="businessAreaName" name="zone.name" size="15" maxlength="20" />
            <font color='gray'> <s:text name="msg.portalMS.zone.areaname.error.tip1" /></font>
            </td>
           </tr>
           <tr class="bule">
           <td class="col1 must1"><s:text name="msg.portalMS.sysmgr.zone.code.colon" /></td>
           <td id='td2'>
            <s:textfield id="businessAreaCode" name="zone.code" size="15" maxlength="8"/>
            <font color='gray'> <s:text name="msg.portalMS.location.areacode.tip" /></font>
           </td>
           </tr>
           <tr>
                 <td class="col1 must"><s:text name="msg.portalMS.sysmgr.zone.pushstreamtype.colon" /></td>
                <td>
                <s:select name="zone.pushStreamType" list="pushStreamTypeList" multiple="false" theme="simple" listKey="pushStreamType" listValue="pushStreamType" ></s:select>
                 </td>
            </tr>
      <tr class="bule">
      <td class="col1 must3"><s:text name="msg.portalMS.location.areaip.info" /></td>
      <td align='left' style="padding: 0px 0 0px 0px;">
       <table class="tb_listdata" id="dynamicTable">
           <tr>
               <td width="25%" scope="col">
                   <s:text name="msg.portalMS.sysmgr.location.ip.begin" />
               </td>
               <td width="25%" scope="col" color="red">
                   <s:text name="msg.portalMS.sysmgr.location.ip.end" />
               </td>
               <td width="15%" colspan="2" class="last_col" scope="col">
                   <div class="data_b">
                   <input type="button" value="<s:text name='msg.portalMS.zone.area.ip.add' />" id="addLine" />
                   </div>
               </td>
               <td width="40%" colspan="2" class="last_col" scope="col">
               </td>
           </tr>
           <s:iterator value="areaIps" id="areaip" status="item">
                   <tr id="<s:property value='#item.index'/>">
                      <td>
                      <input type="text" id="areaIps[<s:property value='#item.index'/>].beginip" name="areaIps[<s:property value='#item.index'/>].beginip" value="<s:property value='#areaip.beginip'/>" onblur="checkIps(areaIps[<s:property value='#item.index'/>].beginip)"/> </td>
                      <td>
                      <input type="text" id="areaIps[<s:property value='#item.index'/>].endip" name="areaIps[<s:property value='#item.index'/>].endip"   value="<s:property value='#areaip.endip'/>" />
                      </td>
                      <td scope="col" class="last_col" colspan="2"><div class="data_b"><input type="button" title="<s:text name='msg.portalMS.zone.area.ip.del' />" value="<s:text name='msg.portalMS.zone.area.ip.del' />" onclick="deltr(<s:property value='#item.index'/>)" /></div></td>
                      <td scope="col" id="td<s:property value='#item.index'/>"><font color="red"><s:property value='#areaip.conflictInfo'/></font></td>
                   </tr>
           </s:iterator>
       </table>
      </td>
    </tr>
        </table>
          <div class="info">
        <priveliege:priveliege funCode="addZone">
            <input type="submit" value="<s:text name="msg.portalMS.confirmButton" />" style="width: 66px;background: url(../images/but_guild_1.gif) top center no-repeat;"/>
         </priveliege:priveliege>
        <button type="reset" onclick="javascript:viewZone();setTimeout(function(){load()},tipTime);" style="width: 66px;background: url(../images/but_guild_1.gif) top center no-repeat;"><s:text name="msg.portalMS.returnBack" /></button>
      </div>
      </s:form>
      </div>
      </div>
</body>
</html>