jQuery动态添加行

 

需要引入jquery.min.js

 

 

     <script type="text/javascript" src="jquery.min.js"></script>
  <script language="javascript">

    //js生成时间流水函数
     function getTimeRndString() {
                  var  d=new Date();
                  var m;
                  var c="-";
                  m = d.getYear()+c;
                  m += (d.getMonth() + 1) + c;
                  m += d.getDate() + c;
                  m += d.getHours() + c;
                  m += d.getMinutes() + c;
                  m += d.getSeconds() + c;
                  m += d.getMilliseconds();
               return m;
               };
                        
          function addrow(id){
          var templeteRow=jQuery("#"+id);
          var newRow = templeteRow.clone(true);
          var rndID="tmpUID"+getTimeRndString();
          newRow.insertBefore(templeteRow);
          newRow.attr("id",rndID);
          newRow.attr("class", id);
          newRow.css("display","block");
          newRow.innerHTML ="<input name=ss />";
          newRow.find("a.delDetailRow_Link").attr("id","a"+rndID);
          newRow.find("input.hiddenid").attr("value","h"+rndID);

 

          newRow.find("input[type=radio]").attr("name","a"+rndID);  // 动态给radio添加名称
          jQuery("#a"+rndID).focus();                             
         
     }
          function act_delDetailRow(obj){
               jQuery(obj).parent().parent().remove();
          }
</script>


<input type="button" value="测试1"  onClick="addrow('infoComplain')" />

<table border="0"   width="97%"  cellpadding="0" cellspacing="1"  id="publicPerson" >
       <tr id='tabletitle' >
          <td   width="20%" height="20" style="background-color: #BDBDBD">姓名</td>
          <td width="20%" style="background-color: #BDBDBD">身份证</td>
          <td width="20%" style="background-color: #BDBDBD">联系方式</td>
          <td  width="20%"  style="background-color: #BDBDBD">备注</td>
          <td width="20%" style="background-color: #BDBDBD">操作</td>
       </tr>


       <tr   bgcolor="#FFFFFF"  id="infoComplain" class="templeteRow" style="display: none;">
      
          <td>
               <input type="hidden" class="hiddenid"  name="infoComplainids" />
          <input   name="infoComplain_name"  type="text"/>              
          </td>
          <td ><input   name="infoComplain_no"   type="text"  value=" ">

          <input type="radio" id="rr1" name="name" value="">
          <input type="radio" id="rr2" name="name" value="">

      </td>
          <td >
          <input   name="infoComplain_con"   type="text"  value=" ">
          </td>
          <td ><input   name="infoComplain_remark"    type="text" value=" "></td>
          <td  align="center"><a  name="delrow" class="delDetailRow_Link" href="javascript:;" onclick="javascript:act_delDetailRow(this);">删除</a></td>
       </tr>
</table>



<input type="button" value="测试2"  onClick="addrow('infoError')" />

<table border="0"   width="97%"  cellpadding="0" cellspacing="1"  id="publicPerson" >
       <tr id='tabletitle' >
          <td   width="20%" height="20" style="background-color: #BDBDBD">姓名</td>
          <td width="20%" style="background-color: #BDBDBD">身份证</td>
          <td width="20%" style="background-color: #BDBDBD">联系方式</td>
          <td  width="20%"  style="background-color: #BDBDBD">备注</td>
          <td width="20%" style="background-color: #BDBDBD">操作</td>
       </tr>


       <tr   bgcolor="#FFFFFF"  id="infoError" class="templeteRow" style="display: none;">
          <td>
     <input type="hidden" class="hiddenid"  name="infoErrorids" />
          <input   name="infoError_name"  type="text"/>              
          </td>
          <td ><input   name="infoError_no"   type="text"  value=" "></td>
          <td >
          <input   name="infoError_con"   type="text"  value=" ">
          </td>
          <td ><input   name="infoError_remark"    type="text" value=" "></td>
          <td  align="center"><a  name="delrow" class="delDetailRow_Link" href="javascript:;" onclick="javascript:act_delDetailRow(this);">删除</a></td>
       </tr>
</table>