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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
如何实现js拖拽效果及原理解析
May 08 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
python错误处理详解
2014/09/28 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python图像处理入门(一)
2019/04/04 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
python 求定积分和不定积分示例
2019/11/20 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
奥巴马演讲稿
2014/01/08 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
python基础之文件处理知识总结
2021/05/23 Python
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers