動態增刪表格行(純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];
}
}
文件放在同級目錄下。
可直接拷貝出測試。