JS 增加删除行

 

<% @ page language="java" contentType="text/html; charset=UTF-8" %>
<% @ include file="/pub/include/common.jsp" %>
< html >
< head >
< title > Untitled Document </ title >
< script  type ="text/javascript" >
function showPage(field,tableId){  
  var table = document.getElementById(tableId);  
  if(table.style.display==""){ 
    table.style.display="none";    
    field.src="<%=path%>/pub/images/butCollapseBlue.gif";  
  }else{ 
    table.style.display="";
    field.src="<%=path%>/pub/images/butExpandBlue.gif";
  } 
}
</ script >
</ style >
< script  language ="javascript"  type ="text/javascript" >
     function $(id) {return document.getElementById(id);}
     function $F(name){return document.getElementsByTagName(name);}
     function ccolor()
     {
            var c1 = document.getElementsByName('otd3');
            for(var i=0; i<c1.length; i++)
            if(c1[i].checked)
            {
                c1[i].parentNode.parentNode.className="checkBg";
                c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
                c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
            }
            else     {    c1[i].parentNode.parentNode.className="";
            c1[i].parentNode.nextSibling.firstChild.className="";
                c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
     }
     function alldell()
      {
         var des =document.getElementsByName('checkItem');
         for(var i=0;i<des.length;i++)
         {
            if(des[i].checked=document.getElementById('delall').checked){
            des[i].parentNode.parentNode.className="checkBg";
            des[i].parentNode.nextSibling.firstChild.className="checkTxt";
            des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
            else{ des[i].parentNode.parentNode.className="";
                des[i].parentNode.nextSibling.firstChild.className="";
                des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
         }
      }
     <!--主要管理员-->
     function add1(){
        var otr = document.getElementById("delegateInfor3").insertRow(-1);
        var checkTd=document.createElement("td");
        checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">';
        var otd1=document.createElement("td");
        otd1.innerHTML = '<input type="text" class="txt"  name="infoValue_txt1" id="infoValue_txt1'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd2 = document.createElement("td");
        otd2.innerHTML = '<input type="text" class="txt"  name="infoValue_txt2" id="infoValue_txt2'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd3 = document.createElement("td");
        otd3.innerHTML = '<input type="text" class="txt"  name="infoValue_txt3" id="infoValue_txt3'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd4 = document.createElement("td");
        otd4.innerHTML = '<input type="text" class="txt"  name="infoValue_txt4" id="infoValue_txt4'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd5 = document.createElement("td");
        otd5.innerHTML = '<input type="text" class="txt"  name="infoValue_txt5" id="infoValue_txt5'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd6 = document.createElement("td");
        otd6.innerHTML = '<input type="text" class="txt"  name="infoValue_txt6" id="infoValue_txt6'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';

        otr.appendChild(checkTd);
        otr.appendChild(otd1); 
        otr.appendChild(otd2); 
        otr.appendChild(otd3);
        otr.appendChild(otd4);
        otr.appendChild(otd5);
        otr.appendChild(otd6);
        
     }
     function del1(){
        var c = document.getElementsByName('checkItem');
        var idArray = new Array();
        for(var i=0; i<c.length; i++)
        if(c[i].checked)
        idArray.push(i);
         var rowIndex;
         var nextDiff =0;
         for(j=0;j< idArray.length;j++)
        {
          rowIndex = idArray[j]+1-nextDiff++;
          document.getElementById("delegateInfor3").deleteRow(rowIndex);
        }
      }
    function save1(){
           //var postString=;
           var checkboxs =  document.getElementsByName("checkItem");
           var tt1 = document.getElementsByName("infoValue_txt1");
           var tt2 = document.getElementsByName("infoValue_txt2");
           var tt3 = document.getElementsByName("infoValue_txt3");
           var tt4 = document.getElementsByName("infoValue_txt4");
           var tt5 = document.getElementsByName("infoValue_txt5");
           var tt6 = document.getElementsByName("infoValue_txt6");
          
           var idArray = new Array();
           for(i=0;i<checkboxs.length;i++)
            {
                idArray.push(tt1[i].value + "|" + tt2[i].value + "|" + tt3[i].value + "|" + tt4[i].value + "|" + tt5[i].value + "|" + tt6[i].value);  
            }
          
           document.getElementById("postString").value = idArray.join("--");
           alert(document.getElementById("postString").value);
    }  
    
    <!--股东信息-->
    function add2(){
        var otr = document.getElementById("delegateInfor3").insertRow(-1);
        var checkTd=document.createElement("td");
        checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">';
        var otd1=document.createElement("td");
        otd1.innerHTML = '<input type="text" class="txt"  name="infoValue_txt1" id="infoValue_txt1'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd2 = document.createElement("td");
        otd2.innerHTML = '<input type="text" class="txt"  name="infoValue_txt2" id="infoValue_txt2'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd3 = document.createElement("td");
        otd3.innerHTML = '<input type="text" class="txt"  name="infoValue_txt3" id="infoValue_txt3'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd4 = document.createElement("td");
        otd4.innerHTML = '<input type="text" class="txt"  name="infoValue_txt4" id="infoValue_txt4'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd5 = document.createElement("td");
        otd5.innerHTML = '<input type="text" class="txt"  name="infoValue_txt5" id="infoValue_txt5'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd6 = document.createElement("td");
        otd6.innerHTML = '<input type="text" class="txt"  name="infoValue_txt6" id="infoValue_txt6'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';

        otr.appendChild(checkTd);
        otr.appendChild(otd1); 
        otr.appendChild(otd2); 
        otr.appendChild(otd3);
        otr.appendChild(otd4);
        otr.appendChild(otd5);
        otr.appendChild(otd6);
        
     }
     function del2(){
        var c = document.getElementsByName('checkItem');
        var idArray = new Array();
        for(var i=0; i<c.length; i++)
        if(c[i].checked)
        idArray.push(i);
         var rowIndex;
         var nextDiff =0;
         for(j=0;j< idArray.length;j++)
        {
          rowIndex = idArray[j]+1-nextDiff++;
          document.getElementById("delegateInfor3").deleteRow(rowIndex);
        }
      }
    function save2(){
           //var postString=;
           var checkboxs =  document.getElementsByName("checkItem");
           var tt1 = document.getElementsByName("infoValue_txt1");
           var tt2 = document.getElementsByName("infoValue_txt2");
           var tt3 = document.getElementsByName("infoValue_txt3");
           var tt4 = document.getElementsByName("infoValue_txt4");
           var tt5 = document.getElementsByName("infoValue_txt5");
           var tt6 = document.getElementsByName("infoValue_txt6");
          
           var idArray = new Array();
           for(i=0;i<checkboxs.length;i++)
            {
                idArray.push(tt1[i].value + "|" + tt2[i].value + "|" + tt3[i].value + "|" + tt4[i].value + "|" + tt5[i].value + "|" + tt6[i].value);  
            }
          
           document.getElementById("postString").value = idArray.join("--");
           alert(document.getElementById("postString").value);
    }
    
    
    <!--评级信息-->
    function add3(){
        var otr = document.getElementById("delegateInfor3").insertRow(-1);
        var checkTd=document.createElement("td");
        checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">';
        var otd1=document.createElement("td");
        otd1.innerHTML = '<input type="text" class="txt"  name="infoValue_txt1" id="infoValue_txt1'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd2 = document.createElement("td");
        otd2.innerHTML = '<input type="text" class="txt"  name="infoValue_txt2" id="infoValue_txt2'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd3 = document.createElement("td");
        otd3.innerHTML = '<input type="text" class="txt"  name="infoValue_txt3" id="infoValue_txt3'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd4 = document.createElement("td");
        otd4.innerHTML = '<input type="text" class="txt"  name="infoValue_txt4" id="infoValue_txt4'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd5 = document.createElement("td");
        otd5.innerHTML = '<input type="text" class="txt"  name="infoValue_txt5" id="infoValue_txt5'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';
        var otd6 = document.createElement("td");
        otd6.innerHTML = '<input type="text" class="txt"  name="infoValue_txt6" id="infoValue_txt6'+($('delegateInfor3').rows.length-1)+'"  maxlength="30" value=""/>';

        otr.appendChild(checkTd);
        otr.appendChild(otd1); 
        otr.appendChild(otd2); 
        otr.appendChild(otd3);
        otr.appendChild(otd4);
        otr.appendChild(otd5);
        otr.appendChild(otd6);
        
     }
     function del3(){
        var c = document.getElementsByName('checkItem');
        var idArray = new Array();
        for(var i=0; i<c.length; i++)
        if(c[i].checked)
        idArray.push(i);
         var rowIndex;
         var nextDiff =0;
         for(j=0;j< idArray.length;j++)
        {
          rowIndex = idArray[j]+1-nextDiff++;
          document.getElementById("delegateInfor3").deleteRow(rowIndex);
        }
      }
    function save3(){
           //var postString=;
           var checkboxs =  document.getElementsByName("checkItem");
           var tt1 = document.getElementsByName("infoValue_txt1");
           var tt2 = document.getElementsByName("infoValue_txt2");
           var tt3 = document.getElementsByName("infoValue_txt3");
           var tt4 = document.getElementsByName("infoValue_txt4");
           var tt5 = document.getElementsByName("infoValue_txt5");
           var tt6 = document.getElementsByName("infoValue_txt6");
          
           var idArray = new Array();
           for(i=0;i<checkboxs.length;i++)
            {
                idArray.push(tt1[i].value + "|" + tt2[i].value + "|" + tt3[i].value + "|" + tt4[i].value + "|" + tt5[i].value + "|" + tt6[i].value);  
            }
          
           document.getElementById("postString").value = idArray.join("--");
           alert(document.getElementById("postString").value);
    }  

       
</ script >
< link  rel ="StyleSheet"  href ="<%=path%>/pub/css/defaultSkin.css"
    type ="text/css"   />
< SCRIPT  LANGUAGE ="JavaScript"
    src ="<%=path%>/pub/js/myDateControler/WdatePicker.js" ></ Script >
</ head >
< body >
< form  id ="customer_add"  name ="customer_add"  method ="post"  action ="" >
< table  width ="100%"  border ="0"  align ="left"  cellpadding ="0"
    cellspacing ="0"  bordercolor ="#ADD47B" >
     < tr >
         < td  colspan ="2"  valign ="middle" >
         < table  width ="100%"  height ="18"  border ="0"  cellpadding ="0"
            cellspacing ="0" >
             < tr >
                 < td  width ="14" > &nbsp; </ td >
                 < td  width ="745"  height ="30"  valign ="bottom" >
                ◇你当前的位置：首页>>信用评级>>基本信息 </ td >
             </ tr >
         </ table >
         </ td >
     </ tr >
     < tr >
         < td  colspan ="2" > &nbsp; </ td >
     </ tr >
     < tr >
         < td  width ="10"  height ="15" > &nbsp; </ td >
         < td  width ="100%"  height ="8"  align ="center"  valign ="top" >
         < table  width ="100%"  height ="175"  border ="1"  align ="center"
            cellpadding ="0"  cellspacing ="0"  bordercolor ="#92C44D" >



             < tr >
                 < td  height ="25"  align ="left" >
                 < table  width ="100%"  border ="0"  align ="left"  cellpadding ="0"
                    cellspacing ="0" >
                     < tr >
                         < td >< IMG  name ="Contextdelegate"
                            src ="<%=path %>/pub/images/butCollapseBlue.gif"
                            onclick ="showPage(this,'delegateInfor3')" > 〖 < strong > 评级信息 </ strong > 〗
                         </ td >
                         < td  align ="right" >< input  name ="addv_btn"  id ="addv_btn"
                            type ="button"  class ="button"  onClick ="add3();"  value ="增加行"   />   < input
                             name ="del_btn"  id ="del_btn"  type ="button"  class ="button"
                            onClick ="del3();"  value ="删除行"   />   < input  name ="save"  id ="save"
                            type ="button"  class ="button"  onClick ="save3();"  value ="得到行"   /></ td >
                     </ tr >
                 </ table >
                 </ td >
             </ tr >
             < tr >
                 < td  valign ="top" >



                 < TABLE  id ="delegateInfor3"  style ="display: none"  width ="100%"
                    border ="1"  align ="center"  cellpadding ="0"  cellspacing ="0"
                    bordercolor ="#CCCCCC" >
                     < tr >
                         < th  width ="40"  height ="20"  align ="left" >< input
                             type ="checkbox"  id ="delall"  onclick ="alldell()" >
                         </ td >
                         < th  width ="100"  height ="20"  align ="center" > 序号
                         </ td >
                         < th  width ="100"  height ="20"  align ="center" > 编号
                         </ td >
                         < th  width ="100"  height ="20"  align ="center" > 评级类型
                         </ td >
                         < th  width ="100"  height ="20"  align ="center" > 评级公司
                         </ td >
                         < th  width ="100"  height ="20"  align ="center" > 级别
                         </ td >
                         < th  width ="100"  height ="20"  align ="center" > 编号
                         </ td >
                     </ tr >

                     < tr >
                         < TD >< input  type ="checkbox"  class ="check"  onclick ="ccolor()"
                            name ="checkItem" ></ TD >
                         < TD >< input  type ="text"  name ="infoValue_txt1"
                            id ="infoValue_txt1"   /></ TD >
                         < TD >< input  type ="text"  name ="infoValue_txt2"
                            id ="infoValue_txt2"   /></ TD >
                         < TD >< input  type ="text"  name ="infoValue_txt3"
                            id ="infoValue_txt3"   /></ TD >
                         < TD >< input  type ="text"  name ="infoValue_txt4"
                            id ="infoValue_txt4"   /></ TD >
                         < TD >< input  type ="text"  name ="infoValue_txt5"
                            id ="infoValue_txt5"   /></ TD >
                         < TD >< input  type ="text"  name ="infoValue_txt6"
                            id ="infoValue_txt6"   /></ TD >
                     </ tr >

                 </ table >
                 < input  type ="text"  name ="postString"  id ="postString" ></ td >
             </ tr >
         </ table >
         </ td >
     </ tr >
</ table >
</ form >
</ script >
</ body >
</ html >