亚洲色图古典武侠,好硬好爽,男人午夜视频在线观看

JavaScript操作table(添加、刪除、上移、下移、交換)

admin

2010年8月18日 1:7 本文熱度 4067

<!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協同辦公管理系統。

欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

JavaScript操作table(添加、刪除、上移、下移、交換)