為接下來要做一個動態輸入的表格積累的資料，非常不錯，下面分享給大家，供大家參考，如果有更好的插件和封裝的東西，共享下哈。。
關鍵代碼如下：
<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 和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='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>
以上所述是小編給大家介紹的JS封裝的自動創建表格的實現代碼的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！