这篇文章主要介绍了 JS 封装的自动创建表格的实现代码的相关资料, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
为接下来要做一个动态输入的表格积累的资料,非常不错,下面分享给大家,供大家参考,如果有更好的插件和封装的东西,共享下哈。。
关键代码如下:
- <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>
其中HTML中的:
- <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 封装的自动创建表格的实现代码的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0303/264861.html