<script type="text/javascript">var currentActiveRow; //選中的顏色var customTable = function() { };customTable.prototype = {init: {ajaxUrl: "",tId: "tbody",delMsg: "確認要刪除嗎?"},ajax: function(params, callback) {var that = this;$.ajax({type: "get",cache: false,dataType: "json",url: that.init.ajaxUrl,data: params,success: arguments[1] || function() { },error: arguments[2] || function() {if (window.console) {console.log("error log: " + data.responseText);}}});},initData: function() {var that = this;var params = {ajaxMethod: "getbookbag",random: Math.random()};var suc = function(data) {if (data.isSuccess === 1) {} else {}};var err = function() {};ttable.ajax(params, suc, err);},addRow: function() {var tbody = document.getElementById(this.init.tId);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 和innerHTMLtbody.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='ttable.deleteRow(event)'/><input type='button' value='編輯' onclick='ttable.editRow(event)'/><a href='javascript:void(0)' onclick='ttable.moveUp(this)'>↑</a>   <a href='javascript:void(0)' onclick='ttable.moveDown(this)'>↓</a>";tbody.rows[rowNo].onclick = ttable.changeActiveRow;},deleteRow: function(eve) {if (confirm(this.init.delMsg)) {element = window.event ? window.event.srcElement : eve.target;var rowNo = element.parentNode.parentNode.rowIndex;var tbody = document.getElementById(this.init.tId);tbody.deleteRow(rowNo - 1);}},editRow: function() {var element = window.event ? window.event.srcElement : eve.target;alert(element);},changeActiveRow: function() { //設置選中行的背景色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";}},cleanWhitespace: function(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);} //使表格行上移，接收參數為鏈接對象},moveUp: function(_a) {var _table = document.getElementById(this.init.tId);ttable.cleanWhitespace(_table);//var _row = _a.parentNode.parentNode;var _row = currentActiveRow;//如果不是第一行 交換順序if (_row.previousSibling)ttable.swapNode(_row, _row.previousSibling);},moveDown: function(_a) {var _table = document.getElementById(this.init.tId);ttable.cleanWhitespace(_table);//通過鏈接對象獲取表格行的引用//var _row = _a.parentNode.parentNode;var _row = currentActiveRow;//如果不是最后一行 則與下一行交換順序if (_row.nextSibling)ttable.swapNode(_row, _row.nextSibling);},swapNode: function(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);}}var ttable = new customTable();</script>

<table border="1" id="tableSpan"><thead id="thead"><tr onclick="ttable.changeActiveRow(this);"><td>序號</td><td>缺省</td><td>啟用</td><td>選項內容</td><td>操作</td></tr></thead><tbody id="tbody"></tbody></table><button onclick="ttable.addRow()" value="添加">添加</button><button onclick="ttable.moveUp()" value="添加">↑</button><button onclick="ttable.moveDown()" value="添加">↓</button>