JS封装的自动创建表格的实现代码


Posted in Javascript onJune 15, 2016

为接下来要做一个动态输入的表格积累的资料,非常不错,下面分享给大家,供大家参考,如果有更好的插件和封装的东西,共享下哈。。

关键代码如下:

<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封装的自动创建表格的实现代码的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
基于JavaScript代码实现自动生成表格
Jun 15 #Javascript
JavaScript生成带有缩进的表格代码
Jun 15 #Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 #Javascript
JavaScript仿flash遮罩动画效果
Jun 15 #Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 #Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 #Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 #Javascript
You might like
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
第六章 php目录与文件操作
2011/12/30 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
php简单截取字符串代码示例
2016/10/19 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jQuery is()函数用法3例
2014/05/06 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Python使用遗传算法解决最大流问题
2018/01/29 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python绘制彩虹图
2019/12/16 Python
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
职高毕业生自我鉴定
2013/10/21 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
美发店5.1活动方案
2014/01/24 职场文书
庆祝儿童节标语
2014/10/09 职场文书
街道务虚会发言材料
2014/10/20 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
《正比例》教学反思
2016/02/23 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript