通过js动态操作table(新增，删除相关列信息)
更新时间：2012年05月23日 22:25:33 作者：
通过js动态操作table(新增，删除相关列信息)的实现代码，需要的朋友可以参考下
1、取得table对象
var objTable=document.getElementById( "tb_visitor" );
2、新增一行
var objTempRow = objTable.rows[0]; //取得模板行
var objNewRow = objTable.insertRow( objTable.rows.length );
objNewRow.id = objTable.rows.length-1;
//添加一行的相关信息
for ( var i=0 ; i<objTempRow.cells.length ; i++ )
{
var objNewCell = objNewRow.insertCell( i );
objNewCell.innerHTML = objTempRow.cells[i].innerHTML;
//
if(objNewCell.innerHTML.indexOf("value=")!=-1){
var si=objNewCell.innerHTML.indexOf("value=")*1+6;
var ei=objNewCell.innerHTML.indexOf(">");
var cellvalue=objNewCell.innerHTML.substring(si,ei);
//将新列内容清空且变为可用状态
objNewCell.innerHTML=objNewCell.innerHTML.replace(cellvalue,'').replace('disabled','');
}
}
//添加行的click事件
objNewRow.onclick = new Function("fn_clickrow(this);");
3、删除一行
objTable.deleteRow(objrow.index);
var objTable=document.getElementById( "tb_visitor" );
2、新增一行
var objTempRow = objTable.rows[0]; //取得模板行
var objNewRow = objTable.insertRow( objTable.rows.length );
objNewRow.id = objTable.rows.length-1;
//添加一行的相关信息
for ( var i=0 ; i<objTempRow.cells.length ; i++ )
{
var objNewCell = objNewRow.insertCell( i );
objNewCell.innerHTML = objTempRow.cells[i].innerHTML;
//
if(objNewCell.innerHTML.indexOf("value=")!=-1){
var si=objNewCell.innerHTML.indexOf("value=")*1+6;
var ei=objNewCell.innerHTML.indexOf(">");
var cellvalue=objNewCell.innerHTML.substring(si,ei);
//将新列内容清空且变为可用状态
objNewCell.innerHTML=objNewCell.innerHTML.replace(cellvalue,'').replace('disabled','');
}
}
//添加行的click事件
objNewRow.onclick = new Function("fn_clickrow(this);");
3、删除一行
objTable.deleteRow(objrow.index);
相关文章
如何才能学好JS？在这里给大家总结一些学习Js的经验，希望能对你们有所帮助。2021-05-05
这篇文章主要介绍了Webpack 是如何加载模块的，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了js+canvas绘制五角星的方法,涉及JavaScript调用canvas组件结合数学运算绘制图形的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了javascript实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
JavaScript 是基于原型的面向对象语言。也就是说，每个实例对象都具有一个原型。对象从该原型中继承属性和方法。这一篇将具体说说构造函数的继承。2011-08-08
下面小编就为大家带来一篇动态加载js、css的简单实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
这篇文章主要介绍了纯JavaScript实现的兼容各浏览器的添加和移除事件封装,本文直接给出实现代码,代码中带详细注释,需要的朋友可以参考下2015-03-03
本文为大家详细介绍喜爱使用js创建子窗口并且实现回传值的示例，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
js form表单input框限制20个字符，10个汉字代码实例
这篇文章主要介绍了js form表单input框限制20个字符，10个汉字，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
方法链一般适合对一个对象进行连续操作(集中在一句代码)。一定程度上可以减少代码量，缺点是它占用了函数的返回值。2011-01-01
最新评论