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 單例模式詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了javascript 單例模式詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02Javascript中的window.event.keyCode使用介紹
我們之前發(fā)過(guò)不少關(guān)于event.keyCode相關(guān)的文章,大家都可以參考下。2011-04-04Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。接下來(lái)通過(guò)本文給大家介紹Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式,對(duì)js表單驗(yàn)證正則表達(dá)式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))
這篇文章主要介紹了BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09JavaScript開(kāi)發(fā)簡(jiǎn)單易懂的Svelte實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了JavaScript開(kāi)發(fā)簡(jiǎn)單易懂的Svelte實(shí)現(xiàn)原理的內(nèi)容詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2021-11-11js中將具有數(shù)字屬性名的對(duì)象轉(zhuǎn)換為數(shù)組
js中將具有數(shù)字屬性名的對(duì)象轉(zhuǎn)換為數(shù)組,雖然不太常用,但我們的確可以給對(duì)象添加以數(shù)字為屬性名的屬性2011-03-03