<html>
<head>
<style type="text/css">
.grid{border:1px solid #808080; border-spacing:0; width:500px; border-collapse:collapse}
.grid th,.grid td{border:0; text-align:center;}
.grid tr{height:25px;line-height:25px;}
.grid tr.odd{background:#d0d0d0}
.grid .btn{width:80px; text-align:center}
</style>
<script type="text/javascript">
(function(){
//
var util = {
next:function next(ele){
if(ele){
var n = ele.nextSibling;
if(n && n.nodeType === 1){
return n;
}
return next(n);
}
},
parseJSON:function(str){
if(typeof JSON !== "undefined"){
return JSON.parse(str);
}
return eval("("+str+")");
},
parseArray:function(obj){
if(!obj){
return obj;
}
var result = [];
if(typeof obj.length !== "undefined"){
try{
var arr = Array.prototype.slice.call(obj,0);
result = arr;
}catch(e){
for(var i=0;i<obj.length;i++){
try{
var target = obj[i];
}catch(e){
if(obj.item){
var target = this.item(i);//nodeList
}
}
if(typeof target !== "undefined"){
result.push(target);
delete target;
}
}
}
}
return result;
},
isFunction:function(fn){
return typeof fn === "function";
},
trim:function(str){
if(typeof str !== "string"){
return str;
}
return str.replace(/^\s+|\s+$/g,"");
},
offset:function offset(ele){
var result = {top:0,left:0};
if(!ele || ele.nodeType !== 1){
return result;
}
result.top = Number(ele.offsetTop || (ele.style.top || "0").replace(/[^\d]+$/,""));
result.left = Number(ele.offsetLeft || (ele.style.left || "0").replace(/[^\d]+$/,""));
if(ele.parentNode){
var r = offset(ele.parentNode);
result.top += r.top;
result.left += r.left;
}
return result;
}
};
//事件处理
var Event = {
on:function(eventType,fn){
var element = this;
if(this.addEventListener){
this.addEventListener(eventType,fn,false);
}else if(this.attachEvent){
//将事件缓冲到该标签上,已解决this指向window(现fn内this指向element)和移除匿名事件问题
var _EventRef='_'+eventType+'EventRef';
if(!element[_EventRef]){
element[_EventRef]=[];
}
var _EventRefs=element[_EventRef];
var index;
for(index in _EventRefs){
if(_EventRefs[index]['realFn']==fn){
return;
}
}
var nestFn=function(){
fn.apply(element,arguments);
};
element[_EventRef].push({'realFn':fn,'nestFn':nestFn});
element.attachEvent('on'+eventType,nestFn);
}
},
remove:function(eventType,fn){
var element = this;
if(this.removeEventListener){
this.removeEventListener(eventType,fn,false);
}else if(this.detachEvent){
var _EventRef='_'+eventType+'EventRef';
if(!element[_EventRef]){
element[_EventRef]=[];
}
var _EventRefs=element[_EventRef]
var index;
var nestFn;
for(index in _EventRefs){
if(_EventRefs[index]['realFn']==fn){
nestFn=_EventRefs[index]['nestFn'];
if(index==_EventRefs.length-1){
element[_EventRef]=_EventRefs.slice(0,index);
}else{
element[_EventRef]=_EventRefs.slice(0,index).concat(_EventRefs.slice(index+1,_EventRefs.length-1));
}
break;
}
}
if(nestFn){
element.detachEvent('on'+eventType,nestFn);
}
}
}
};
//extend
(function()
javascript实现动态模态绑定grid
最新推荐文章于 2020-11-03 18:58:55 发布
这个博客介绍了一种使用JavaScript实现动态模态绑定grid的方法。通过创建一个grid对象,可以处理表格数据的绑定、添加、删除等操作。文章提供了一个完整的JavaScript代码示例,展示了如何初始化grid,绑定数据,以及处理数据行的增删和编辑功能。此外,还涉及到事件处理和数据格式化。
摘要由CSDN通过智能技术生成