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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
基于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
小偷PHP+Html+缓存
2006/11/25 PHP
实用函数3
2007/11/08 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Python几种常见算法汇总
2020/06/02 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
彪马法国官网:PUMA法国
2019/12/15 全球购物
机电一体化专业应届生求职信
2013/11/27 职场文书
财务经理岗位职责
2015/01/31 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang