通過js動(dòng)態(tài)操作table(新增，刪除相關(guān)列信息)
更新時(shí)間：2012年05月23日 22:25:33 作者：
通過js動(dòng)態(tài)操作table(新增，刪除相關(guān)列信息)的實(shí)現(xiàn)代碼，需要的朋友可以參考下
1、取得table對(duì)象
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;
//添加一行的相關(guān)信息
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);
//將新列內(nèi)容清空且變?yōu)榭捎脿顟B(tài)
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;
//添加一行的相關(guān)信息
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);
//將新列內(nèi)容清空且變?yōu)榭捎脿顟B(tài)
objNewCell.innerHTML=objNewCell.innerHTML.replace(cellvalue,'').replace('disabled','');
}
}
//添加行的click事件
objNewRow.onclick = new Function("fn_clickrow(this);");
3、刪除一行
objTable.deleteRow(objrow.index);
相關(guān)文章
如何才能學(xué)好JS？在這里給大家總結(jié)一些學(xué)習(xí)Js的經(jīng)驗(yàn)，希望能對(duì)你們有所幫助。2021-05-05
這篇文章主要介紹了Webpack 是如何加載模塊的，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-05-05
這篇文章主要介紹了js+canvas繪制五角星的方法,涉及JavaScript調(diào)用canvas組件結(jié)合數(shù)學(xué)運(yùn)算繪制圖形的相關(guān)技巧,需要的朋友可以參考下2016-01-01
javascript實(shí)現(xiàn)計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript 原型繼承之構(gòu)造函數(shù)繼承
JavaScript 是基于原型的面向?qū)ο笳Z(yǔ)言。也就是說(shuō)，每個(gè)實(shí)例對(duì)象都具有一個(gè)原型。對(duì)象從該原型中繼承屬性和方法。這一篇將具體說(shuō)說(shuō)構(gòu)造函數(shù)的繼承。2011-08-08
動(dòng)態(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-05
純JavaScript實(shí)現(xiàn)的兼容各瀏覽器的添加和移除事件封裝
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)的兼容各瀏覽器的添加和移除事件封裝,本文直接給出實(shí)現(xiàn)代碼,代碼中帶詳細(xì)注釋,需要的朋友可以參考下2015-03-03
本文為大家詳細(xì)介紹喜愛使用js創(chuàng)建子窗口并且實(shí)現(xiàn)回傳值的示例，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
js form表單input框限制20個(gè)字符，10個(gè)漢字代碼實(shí)例
這篇文章主要介紹了js form表單input框限制20個(gè)字符，10個(gè)漢字，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript中兩種鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼
方法鏈一般適合對(duì)一個(gè)對(duì)象進(jìn)行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量，缺點(diǎn)是它占用了函數(shù)的返回值。2011-01-01