动态增删表格行(纯JS写法) 归档

进行表格下行的动态增加与删除 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>表格动态增删样例</title> 
<script type="text/javascript" src="dynamic_table.js"></script> 
</head> 
          
          
<body> 
<TABLE id="actiHotTable" style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM: #ff6600 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=80% align=center border=1> 
            <THEAD> 
                <TR> 
                    <TH style="width:2%;" title="序号">序号</TH> 
                    <TH style="width:2%;" title="营销活动名称">营销活动名称</TH> 
                    <TH style="width:2%;" title=接入号码>标签</TH> 
                    <TH style="width:2%;" title=对象名称>操作</TH> 
                </TR> 
            </THEAD> 
                      
            <tbody> 
            <TR> 
                   <TD><input TYPE="text" NAME="hotSeq" ID="hotSeq" readonly="readonly" /></TD> 
                     <TD><input TYPE="input" NAME="actionName" value="" /> 
                         <input TYPE="hidden" NAME="actionId" value=""  /> 
                         <button type="button" id="chooseAction" name="chooseAction"  
                     <TD> 
                       <select name="hotType"> 
                       <option value="NEW">NEW</option> 
                       <option value="HOT">HOT</option> 
                       </select> 
                     </TD> 
                     <TD> 
                                  
                     <button type="button" id="add_hot_config" name="add_hot_config"  
                     <button type="button" id="del_hot_config" name="del_hot_config"  
                     </TD> 
                </TR> 
            </tbody> 
        </TABLE> 
           
              
</body> 
</html> 

dynamic_table.js 
dynamic_table.js[javascript] view plaincopyprint?/**
 * 增加一行
 * @param obj
 */ 
function addRow(obj){ 
        
    var appendRow = obj.parentNode.parentNode; 
    //把其中的营销活动名称清除  
    var clonedRow=appendRow.cloneNode(true); 
    var inputs=clonedRow.cells[1].getElementsByTagName("INPUT"); 
            
    for(var i=0;i<inputs.length;i++){ 
      inputs[i].value=''; 
    } 
    //obj.parentNode.parentNode.parentNode.appendChild(clonedRow);//加在table后面  
        
    //指定加在table的指定行的后面  
    obj.parentNode.parentNode.parentNode.insertBefore(clonedRow,appendRow.nextSibling); 
        
    reSort(); 
} 
        
/**
 * 删除一行
 * @param obj
 */ 
function deleteRow(obj){ 
      var tableRowLenth=obj.parentNode.parentNode.parentNode.rows.length; 
      if(tableRowLenth>1){ 
          var delNode=obj.parentNode.parentNode; 
          delNode.parentNode.removeChild(obj.parentNode.parentNode);  
      }else{ 
          alert('没有可删除的行！'); 
      } 
              
      reSort(); 
} 
        
/**
 * 进行排序
 */ 
function reSort(){ 
      var oTBODY  = document.getElementById('actiHotTable').tBodies.item(0); 
      var rowsCount =  oTBODY.rows.length; 
      for(var i=0;i<rowsCount;i++){ 
          oTBODY.rows[i].cells[0].childNodes[0].value=i+1; 
          // alert(oTBODY.rows[i].cells[0].childNodes[0].id);  
          // oTBODY.rows[i].cells[0].childNodes[0].id='sortId_'+i;  
          // alert(oTBODY.rows[i].cells[0].childNodes[0].id);  
      } 
} 
        
/**
 * 进行选择
 * @param obj
 */ 
function chooseActiAction(obj){ 
      var url='choose.jsp'; 
      var returnValue = window.showModalDialog(url,'target',"scroll:yes;resizable:no;status:no;help:no;dialogHeight:350px;dialogWidth:800px"); 
         
      if(typeof(returnValue)=='undefined'){ 
          return; 
      } 
              
      var returnArray= returnValue.split(","); 
      if(returnArray.length>1){ 
         var tags=obj.parentNode.getElementsByTagName("INPUT"); 
         tags[0].value=returnArray[0]; 
         tags[1].value=returnArray[1]; 
     } 
             
              
}