JS封装的自动创建表格的实现代码
为接下来要做一个动态输入的表格积累的资料，非常不错，下面分享给大家，供大家参考，如果有更好的插件和封装的东西，共享下哈。。
关键代码如下：
<scripttype="text/javascript">
varcurrentActiveRow;//选中的颜色
varcustomTable=function(){};
customTable.prototype={
init:{
ajaxUrl:"",
tId:"tbody",
delMsg:"确认要删除吗?"
},
ajax:function(params,callback){
varthat=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("errorlog:"+data.responseText);
}
}
});
},
initData:function(){
varthat=this;
varparams={
ajaxMethod:"getbookbag",
random:Math.random()
};
varsuc=function(data){
if(data.isSuccess===1){
}else{
}
};
varerr=function(){
};
ttable.ajax(params,suc,err);
},
addRow:function(){
vartbody=document.getElementById(this.init.tId);
varrowNo=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="<inputname='radioRMS'type='radio'value='1'></input>";
tbody.rows[rowNo].insertCell(2);
tbody.rows[rowNo].cells[2].innerHTML="<inputname='checkboxRMS'type='checkbox'value='1'></input>";
tbody.rows[rowNo].insertCell(3);
tbody.rows[rowNo].cells[3].innerHTML="<inputname='descript'type='text'value='des"+(rowNo+1)+"'></input>";
tbody.rows[rowNo].insertCell(4);
tbody.rows[rowNo].cells[4].innerHTML="<inputtype='button'value='删除'onclick='ttable.deleteRow(event)'/><inputtype='button'value='编辑'onclick='ttable.editRow(event)'/><ahref='javascript:void(0)'onclick='ttable.moveUp(this)'>↑</a> <ahref='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;
varrowNo=element.parentNode.parentNode.rowIndex;
vartbody=document.getElementById(this.init.tId);
tbody.deleteRow(rowNo-1);
}
},
editRow:function(){
varelement=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(vari=0;i<element.childNodes.length;i++){
varnode=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);
}
}
varttable=newcustomTable();
</script>
其中ＨＴＭＬ中的：
<tableborder="1"id="tableSpan"> <theadid="thead"> <tronclick="ttable.changeActiveRow(this);"> <td> 序号 </td> <td> 缺省 </td> <td> 启用 </td> <td> 选项内容 </td> <td> 操作 </td> </tr> </thead> <tbodyid="tbody"> </tbody> </table> <buttononclick="ttable.addRow()"value="添加"> 添加</button> <buttononclick="ttable.moveUp()"value="添加"> ↑</button> <buttononclick="ttable.moveDown()"value="添加"> ↓</button>
以上所述是小编给大家介绍的JS封装的自动创建表格的实现代码的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！