JavaScript操作table(新增、刪除、上移、下移、交換)_jQuery
阿新 • • 發佈：2019-01-05
<!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>
< 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>