为接下来要做一个动态输入的表格积累的资料,非常不错,下面分享给大家,供大家参考,如果有更好的插件和封装的东西,共享下哈。。
关键代码如下:
<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 "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封装的自动创建表格的实现代码的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7
- 雨果唱片-三角琴《俄罗斯民间音乐系列-梁祝(中国名曲)》wav
- 《塞尔达传说:智慧的再现》新实机!无之世界介绍
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 任天堂更新网络投稿规范:打击影响他人游戏体验行为
- 冼佩瑾.2024-女儿Daughter(EP)【杰威尔】【FLAC分轨】
- 黑豹乐队.1993-光芒之神【摇音晨【WAV+CUE】
- 曾轶可.2011-一只猫的旅行【天娱传媒】【WAV+CUE】
- 黑神话悟空上品狼刺客精魄获取方法一览|上品狼刺客精魄收集攻略