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中变量提升 Hoisting
Jul 03 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
javascript学习之json入门
Dec 22 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
element 动态合并表格的步骤
Dec 31 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中eclipse 用空格替换 tab键
2013/06/24 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
php强制下载文件函数
2016/08/24 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
JS实现静止元素自动移动示例
2014/04/14 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
对pandas的行列名更改与数据选择详解
2018/11/12 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python编写俄罗斯方块
2020/03/13 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
搞笑老公保证书
2015/02/26 职场文书
跑吧孩子观后感
2015/06/10 职场文书
边城读书笔记
2015/06/29 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书