您的位置：首页 > Web前端 > JavaScript

JavaScript动态实现表格添加、删除、插入、上移、下移一行功能

2010-08-26 16:50 1296 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航