JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Type</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="950" border="0" cellspacing="0" cellpadding="0" id="categoryTable">
<tr>
<td>
Category Name
</td>
<td>Add sub-category</td>
<td>Move</td>
<td>Down</td>
<td>Delete</td>
</tr>
</table>
<input type="button" value="Add a new category" onclick="AddNewCategory()" />
</div>
</form>
<script type="text/javascript">
function AddNewCategory()
{
//添加一行
var i =categoryTable.rows.length;
var nameId ="txtName"+i;
var subBtnId = "btnAddSub"+i;
var moveId = "btnMove"+i;
var downId = "btnDown"+i;
var deleteId = "btnDelete"+i;
var newTr = categoryTable.insertRow();
//添加列
var nameTd = newTr.insertCell();
var subBtnTd = newTr.insertCell();
var moveTd = newTr.insertCell();
var downTd = newTr.insertCell();
var deleteTd = newTr.insertCell();
//设置列内容和属性
nameTd.innerHTML = '<input id="'+ nameId +'" type="text" width="190px" />';
subBtnTd.innerHTML = '<input id="'+ subBtnId +'" type="button" value="Add sub-category" onclick="AddSubCategory()" style="background-color: #FFCC99" />';
moveTd.innerHTML = '<input id="'+ moveId +'" type="button" value="Move" onclick="Move_up(this)" />';
downTd.innerHTML = '<input id="'+ downId +'" type="button" value="Down" onclick="Move_down(this)" />';
deleteTd.innerHTML = '<input id="'+ deleteId +'" type="button" value="Delete" onclick="DelRow()" />';
}
function AddSubCategory()
{
//添加一行
var rowIndex = window.event.srcElement.parentElement.parentElement.rowIndex + 1;
var i =categoryTable.rows.length;
var nameId ="txtSubName"+i;
var subBtnId = "btnAddSubT"+i;
var moveId = "btnSubMove"+i;
var downId = "btnSubDown"+i;
var deleteId = "btnSubDelete"+i;
var newTr = categoryTable.insertRow(rowIndex);
//添加列
var nameTd = newTr.insertCell();
var subBtnTd = newTr.insertCell();
var moveTd = newTr.insertCell();
var downTd = newTr.insertCell();
var deleteTd = newTr.insertCell();
//设置列内容和属性
nameTd.innerHTML = '<input id="'+ nameId +'" type="text" width="150px" />';
subBtnTd.innerHTML = '<input id="'+ subBtnId +'" type="button" value="Add sub-category" />';
moveTd.innerHTML = '<input id="'+ moveId +'" type="button" value="Move" onclick="Move_up(this)" />';
downTd.innerHTML = '<input id="'+ downId +'" type="button" value="Down" onclick="Move_down(this)" />';
deleteTd.innerHTML = '<input id="'+ deleteId +'" type="button" value="Delete" onclick="DelRow()" />';
}
function DelRow()
{
//删除一行
//获得行索引
//两个parentElement分别是TD和TR哟，rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
var getRow = window.event.srcElement.parentElement.parentElement.rowIndex;
categoryTable.deleteRow(getRow);
}
function Move_up(src)
{
//上移一行
var rowIndex=src.parentElement.parentElement.rowIndex;
if (rowIndex>=2)
change_row(rowIndex-1,rowIndex);
}
function Move_down(src)
{
//下移一行
var rowIndex=src.parentElement.parentElement.rowIndex;
var tl = document.getElementById("categoryTable");
if (rowIndex<tl.rows.length-1)
change_row(rowIndex+1,rowIndex);
}
function change_row(line1,line2)
{
//执行交换
categoryTable.rows[line1].swapNode(categoryTable.rows[line2]);
}
</script>
</body>
</html>
