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 页面坐标相关知识整理
Jan 09 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
bootstrap table插件动态加载表头
Jul 19 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+DBM的同学录程序(1)
2006/10/09 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php接口技术实例详解
2016/12/07 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
详解Python验证码识别
2016/01/25 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
centos7之Python3.74安装教程
2019/08/15 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
请解释在new与override的区别
2012/10/29 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
财务会计专业自荐书
2014/06/30 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
教师学期个人总结
2015/02/11 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
离婚案件答辩状
2015/05/22 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript