javascript實(shí)現(xiàn)動(dòng)態(tài)增加刪除表格行(兼容IE/FF)
更新時(shí)間：2007年04月02日 00:00:00 作者：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>動(dòng)態(tài)增刪表格行</title>
<script language="JavaScript">
<!--
//author: Robin
//email: griefforyou@gmail.com
var rowIndex=0;
function addLine(obj){
var objSourceRow=obj.parentNode.parentNode;
var objTable=obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value=='增加'){
rowIndex++;
var objRow=objTable.insertRow(rowIndex);
var objCell;
objCell=objRow.insertCell(0);
objCell.innerHTML=" ";
objCell=objRow.insertCell(1);
objCell.innerHTML=objSourceRow.cells[1].innerHTML;
objCell=objRow.insertCell(2);
objCell.innerHTML=objSourceRow.cells[2].innerHTML.replace(/增加/,'刪除');
}
else{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
}
}
function removeLine(){
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post">
<table width="400" border="0">
<tr>
<td>基本信息</td>
<td><select name="select">
<option value="" selected>選擇</option>
<option value="1">第一</option>
<option value="2">第二</option>
</select></td>
<td><input name="basicinfo" type="text" id="basicinfo">
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)"></td>
</tr>
<tr>
<td>其它信息</td>
<td> </td>
<td><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>動(dòng)態(tài)增刪表格行</title>
<script language="JavaScript">
<!--
//author: Robin
//email: griefforyou@gmail.com
var rowIndex=0;
function addLine(obj){
var objSourceRow=obj.parentNode.parentNode;
var objTable=obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value=='增加'){
rowIndex++;
var objRow=objTable.insertRow(rowIndex);
var objCell;
objCell=objRow.insertCell(0);
objCell.innerHTML=" ";
objCell=objRow.insertCell(1);
objCell.innerHTML=objSourceRow.cells[1].innerHTML;
objCell=objRow.insertCell(2);
objCell.innerHTML=objSourceRow.cells[2].innerHTML.replace(/增加/,'刪除');
}
else{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
}
}
function removeLine(){
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<form name="form1" method="post">
<table width="400" border="0">
<tr>
<td>基本信息</td>
<td><select name="select">
<option value="" selected>選擇</option>
<option value="1">第一</option>
<option value="2">第二</option>
</select></td>
<td><input name="basicinfo" type="text" id="basicinfo">
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)"></td>
</tr>
<tr>
<td>其它信息</td>
<td> </td>
<td><input type="text" name="textfield"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
您可能感興趣的文章:
- vue.js+Element實(shí)現(xiàn)表格里的增刪改查
- JS對(duì)HTML表格進(jìn)行增刪改操作
- JavaScript獲取表格（table）當(dāng)前行的值、刪除行、增加行
- Vue.js實(shí)現(xiàn)表格動(dòng)態(tài)增加刪除的方法（附源碼下載）
- AngularJS實(shí)現(xiàn)表格的增刪改查（僅限前端）
- 純?cè)鷍s實(shí)現(xiàn)table表格的增刪
- js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧總結(jié)
- 使用Bootstrap + Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)增刪表格的方法
- javascript實(shí)現(xiàn)表格信息增添與刪除
相關(guān)文章
javascript面向?qū)ο蟪绦蛟O(shè)計(jì)高級(jí)特性經(jīng)典教程(值得收藏)
這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)高級(jí)特性,結(jié)合實(shí)例形式詳細(xì)講述了javascript對(duì)象的創(chuàng)建,訪(fǎng)問(wèn),刪除,對(duì)象類(lèi)型,擴(kuò)展等,需要的朋友可以參考下2016-05-05
js不能獲取隱藏div的的寬度，現(xiàn)在的辦法是先將其顯示出來(lái)，再獲取其寬度，計(jì)算位置，下面的示例，大家可以參考下2014-09-09
Rxjs?中處理錯(cuò)誤和抓取錯(cuò)誤的代碼案例
這篇文章主要介紹了Rxjs?中怎么處理和抓取錯(cuò)誤,本文，我們學(xué)習(xí)了如何使用?catchError?在數(shù)據(jù)流中抓取錯(cuò)誤，怎么去修改和返回?observable，或者使用?EMPTY?不去觸發(fā)組件中的錯(cuò)誤，需要的朋友可以參考下2022-08-08
JS實(shí)現(xiàn)漂亮的淡藍(lán)色滑動(dòng)門(mén)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的淡藍(lán)色滑動(dòng)門(mén)效果代碼,涉及JavaScript通過(guò)自定義函數(shù)遍歷頁(yè)面元素及動(dòng)態(tài)設(shè)置元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
JavaScript之promise_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之promise的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本文主要介紹了jquery源碼中常見(jiàn)的知識(shí)點(diǎn)以及javascript中原型鏈常見(jiàn)的知識(shí)點(diǎn)，非常的全面，這里推薦給小伙伴們。2015-03-03
用函數(shù)式編程技術(shù)編寫(xiě)優(yōu)美的 JavaScript_ibm
函數(shù)式編程語(yǔ)言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長(zhǎng)一段時(shí)間了，但是從歷史上看，它們沒(méi)有豐富的工具和庫(kù)可供使用。隨著 .NET 平臺(tái)上的 Haskell 的出現(xiàn)，函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語(yǔ)言，例如 C++ 和 JavaScript，引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下，JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程，就可以避免這些問(wèn)題。此外，可以利用函數(shù)式編程風(fēng)格編寫(xiě)更加優(yōu)美的回調(diào)。2008-05-05
基于 Bootstrap 的 jQuery 表格插件，通過(guò)簡(jiǎn)單的設(shè)置，就可以擁有強(qiáng)大的單選、多選、排序、分頁(yè)，以及編輯、導(dǎo)出、過(guò)濾（擴(kuò)展）等等的功能2017-06-06
JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨機(jī)產(chǎn)生超鏈接地址的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)上隨機(jī)產(chǎn)生超鏈接地址的方法,涉及JavaScript隨機(jī)數(shù)的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
JS中的Error對(duì)象及使用JSON.stringify()序列化Error問(wèn)題
這篇文章主要介紹了JS中的Error對(duì)象及使用JSON.stringify()序列化Error問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08