JavaScript操作table(添加、删除、上移、下移、交换)

admin

2010年8月18日 1:7 本文热度 3663

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">
//添加一行
function add() {
var tbody = document.getElementById("tbody");
var rowNo = tbody.rows.length;
tbody.insertRow(rowNo);
tbody.rows[rowNo].insertCell(0);
tbody.rows[rowNo].cells[0].appendChild(document.createTextNode(rowNo + 1)); //innerText = "0001";//innerText 和innerHTML
tbody.rows[rowNo].insertCell(1);
tbody.rows[rowNo].cells[1].innerHTML = "<input name='radioRMS' type='radio' value='1'></input>";
tbody.rows[rowNo].insertCell(2);
tbody.rows[rowNo].cells[2].innerHTML = "<input name='checkboxRMS' type='checkbox' value='1'></input>";
tbody.rows[rowNo].insertCell(3);
tbody.rows[rowNo].cells[3].innerHTML = "<input name='descript' type='text' value='des"+ (rowNo + 1) + "'></input>";
tbody.rows[rowNo].insertCell(4);
tbody.rows[rowNo].cells[4].innerHTML = "<input type='button' value='删除' onclick='deleteRow(event)'/><a href='javascript:void(0)' onclick='moveUp(this)'>上移</a><a href='javascript:void(0)' onclick='moveDown(this)'>下移</a>";

tbody.rows[rowNo].onclick = changeActiveRow;
}

//删除一行
function deleteRow(eve) {
if (confirm("确认删除")) {
element = window.event ? window.event.srcElement : eve.target;
var rowNo = element.parentNode.parentNode.rowIndex;
var tbody = document.getElementById("tbody");
tbody.deleteRow(rowNo - 1);
}
}

//设置选中行的背景色
var currentActiveRow;
function changeActiveRow() {
eve = arguments[0];
element = window.event ? window.event.srcElement : eve.target;
obj = element.parentNode;
while (obj && obj.tagName != "TR") {
obj = obj.parentNode;
}
if (currentActiveRow)
currentActiveRow.style.backgroundColor = "";
currentActiveRow = obj;
currentActiveRow.style.backgroundColor = "Red";
}

////////////////
///移动行
////////////////
function cleanWhitespace(element) {
//遍历element的子节点
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i]
if (node.nodeType == 3 && !/\s/.test(node.nodue))
node.parentNode.removeChild(node);
}
}

//使表格行上移，接收参数为链接对象
function moveUp(_a) {
//获得表格对象
var _table = document.getElementById("tbody");
cleanWhitespace(_table);
//通过链接对象获取表格行的引用
//var _row = _a.parentNode.parentNode;
var _row = currentActiveRow;

//如果不是第一行交换顺序
if (_row.previousSibling)
swapNode(_row, _row.previousSibling);
}

//使表格行下移接收参数为链接对象
function moveDown(_a) {
//获得表格对象
var _table = document.getElementById("tbody");
cleanWhitespace(_table);

//通过链接对象获取表格行的引用
//var _row = _a.parentNode.parentNode;
var _row = currentActiveRow;

//如果不是最后一行则与下一行交换顺序
if (_row.nextSibling)
swapNode(_row, _row.nextSibling);
}

//定义通用的函数交换两个节点的位置
function swapNode(node1, node2) {
//获取父节点
var _parent = node1.parentNode;
//获取两个节点的相应位置
var _t1 = node1.nextSibling;
var _t2 = node2.nextSibling;
//将node2插入到原来node1的位置
if (_t1)
_parent.insertBefore(node2, _t1);
else
_parent.appendChild(node2);
//将node1插入到原来ndoe2的位置
if (_t2)
_parent.insertBefore(node1, _t2);
else
_parent.appendChild(node1);
}

//////////
///以下方式仅支持IE
/////////
//上移
function moveUpIE() {
var myTable;
var Elm = event.srcElement;
while (Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
}
x = Elm.rowIndex;
myTable = Elm.parentElement;
//移到下一行
if (x < myTable.rows.length - 1) {
moveCell(myTable, x, x - 1);
}
}

//下移
function moveDownIE() {
var myTable;
var Elm = event.srcElement;
while (Elm && Elm.tagName != "TR") {
Elm = Elm.parentElement;
}
x = Elm.rowIndex;
myTable = Elm.parentElement;
//移到下一行
if (x < myTable.rows.length - 1) {
moveCell(myTable, x, x + 1);
}
}

//移动行，参数：要操作的table，要相互移动的行a，b
function moveCell(myTable, a, b) {
var el = myTable.all.tags("input")
var arr = [];
//遍历所有input控件
for (i = 0; i < el.length; i++) {
if (el[i].type == "checkbox")
//对所有checkbox控件添加到数组中
arr.push(el[i], el[i].checked);
}

myTable.moveRow(a, b);

//对数组中所有元素获得对象并对引用的对象赋原值
while (arr.length > 0)
arr.shift().checked = arr.shift();
}
</script>
</head>

<body>
<table border="1" id="tableSpan">
<thead id="thead">
<tr onclick="changeActiveRow(this);">
<td>序号</td>
<td>缺省</td>
<td>启用</td>
<td>选项内容</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tbody">

</tbody>
</table>
<button onclick="add()" value="添加">添加</button>
<button onclick="moveUp()" value="添加">_↑_</button>
<button onclick="moveDown()" value="添加">_↓_</button>
</body>
</html>

该文章在 2010/8/18 1:07:34 编辑过

关键字查询

添加

删除

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。