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

动态增删表格行(纯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" onclick="chooseActiAction(this)">选择活动</button></TD>
					 <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" onclick="addRow(this)">新增</button>
					 <button type="button" id="del_hot_config" name="del_hot_config" onclick="deleteRow(this)">删除</button>
					 </TD>
				</TR>
			</tbody>
		</TABLE>
 
    
</body>
</html>
 
 

dynamic_table.js
/**
 * 增加一行
 * @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];
	 }
	 
	  
}




文件放在同级目录下。

可直接拷贝出测试。


你可能感兴趣的:(动态增删表格行(纯JS写法) 归档)