JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加,刪除行的方法實(shí)例詳解
本文實(shí)例講述了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加,刪除行的方法。分享給大家供大家參考。具體如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>增加Table行</title> </head> <script language="javascript">// Example: obj = findObj("image1"); function findObj(theObj, theDoc){ var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj;} //添加一個(gè)參與人填寫行 function AddSignRow(){ //讀取最后一行的行號(hào),存放在txtTRLastIndex文本框中 var txtTRLastIndex = findObj("txtTRLastIndex",document); var rowID = parseInt(txtTRLastIndex.value); var signFrame = findObj("SignFrame",document); //添加行 var newTR = signFrame.insertRow(signFrame.rows.length); newTR.id = "SignItem" + rowID; //添加列:序號(hào) var newNameTD=newTR.insertCell(0); //添加列內(nèi)容 newNameTD.innerHTML = newTR.rowIndex.toString(); //添加列:姓名 var newNameTD=newTR.insertCell(1); //添加列內(nèi)容 newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />"; //添加列:電子郵箱 var newEmailTD=newTR.insertCell(2); //添加列內(nèi)容 newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />"; //添加列:電話 var newTelTD=newTR.insertCell(3); //添加列內(nèi)容 newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />"; //添加列:手機(jī) var newMobileTD=newTR.insertCell(4); //添加列內(nèi)容 newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />"; //添加列:公司名 var newCompanyTD=newTR.insertCell(5); //添加列內(nèi)容 newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />"; //添加列:刪除按鈕 var newDeleteTD=newTR.insertCell(6); //添加列內(nèi)容 newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">刪除</a></div>"; //將行號(hào)推進(jìn)下一行 txtTRLastIndex.value = (rowID + 1).toString() ; } //刪除指定行 function DeleteSignRow(rowid){ var signFrame = findObj("SignFrame",document); var signItem = findObj(rowid,document); //獲取將要?jiǎng)h除的行的Index var rowIndex = signItem.rowIndex; //刪除指定Index的行 signFrame.deleteRow(rowIndex); //重新排列序號(hào),如果沒(méi)有序號(hào),這一步省略 for(i=rowIndex;i<signFrame.rows.length;i++){ signFrame.rows[i].cells[0].innerHTML = i.toString(); } }//清空列表 function ClearAllSign(){ if(confirm('確定要清空所有參與人嗎?')){ var signFrame = findObj("SignFrame",document); var rowscount = signFrame.rows.length; //循環(huán)刪除行,從最后一行往前刪除 for(i=rowscount - 1;i > 0; i--){ signFrame.deleteRow(i); } //重置最后行號(hào)為1 var txtTRLastIndex = findObj("txtTRLastIndex",document); txtTRLastIndex.value = "1"; //預(yù)添加一行 AddSignRow(); } } </script> <body> <div> <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame"> <tr id="trHeader"> <td width="27" bgcolor="#96E0E2">序號(hào)</td> <td width="64" bgcolor="#96E0E2">用戶姓名</td> <td width="98" bgcolor="#96E0E2">電子郵箱</td> <td width="92" bgcolor="#96E0E2">固定電話</td> <td width="86" bgcolor="#96E0E2">移動(dòng)手機(jī)</td> <td width="153" bgcolor="#96E0E2">公司名稱</td> <td width="57" align="center" bgcolor="#96E0E2"> </td> </tr> </table> </div> <div> <input type="button" name="Submit" value="添加參與人" onclick="AddSignRow()" /> <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" /> <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" /> </div> </body> </html>
JavaScript實(shí)現(xiàn)動(dòng)態(tài)的增加或刪除table的行
<SCRIPT LANGUAGE="JScript"> function numberCells() { var count=0; for (i=0; i < document.all.mytable.rows.length; i++) { for (j=0; j < document.all.mytable.rows(i).cells.length; j++) { document.all.mytable.rows(i).cells(j).innerText = count; count++; } } } function tb_addnew() { var ls_t=document.all("mytable") maxcell=ls_t.rows(0).cells.length; mynewrow = ls_t.insertRow(); for(i=0;i<maxcell;i++) { mynewcell=mynewrow.insertCell(); mynewcell.innerText="a"+i; } } function tb_delete() { var ls_t=document.all("mytable"); maxcell=ls_t.rows.length; if(maxcell > 1) { ls_t.deleteRow() ; } } </SCRIPT> <BODY onload="numberCells()"> <TABLE id=mytable border=1> <TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR> <TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR> <TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR> </TABLE> <input type=button value="Ins Row" onclick="tb_addnew()"> <input type=button value="Del Row" onclick="tb_delete()" >
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JavaScript動(dòng)態(tài)改變HTML頁(yè)面元素例如添加或刪除
- javascript動(dòng)態(tài)添加、修改、刪除對(duì)象的屬性與方法詳解
- JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)
- JavaScript 高級(jí)篇之DOM文檔,簡(jiǎn)單封裝及調(diào)用、動(dòng)態(tài)添加、刪除樣式(六)
- javascript對(duì)talbe進(jìn)行動(dòng)態(tài)添加、刪除、驗(yàn)證實(shí)現(xiàn)代碼
- javascript動(dòng)態(tài)添加刪除tabs標(biāo)簽的方法
相關(guān)文章
JS基于clipBoard.js插件實(shí)現(xiàn)剪切、復(fù)制、粘貼
這篇文章主要介紹了JS實(shí)現(xiàn)剪切、復(fù)制、粘貼——clipBoard.js 的相關(guān)資料,需要的朋友可以參考下2016-05-05微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法
這篇文章主要為大家詳細(xì)介紹了微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02淺談bootstrap layer.open中end的使用方法
今天小編就為大家分享一篇淺談bootstrap layer.open中end的使用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Javascript中設(shè)置默認(rèn)參數(shù)值示例
這篇文章主要介紹了Javascript中默認(rèn)參數(shù)值的設(shè)置,很簡(jiǎn)單,但很實(shí)用,需要的朋友可以參考下2014-09-09js實(shí)現(xiàn)正則匹配中文標(biāo)點(diǎn)符號(hào)的方法
這篇文章主要介紹了js實(shí)現(xiàn)正則匹配中文標(biāo)點(diǎn)符號(hào)的方法,涉及JavaScript正則匹配與判定的簡(jiǎn)單使用技巧,需要的朋友可以參考下2015-12-12淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承
下面小編就為大家?guī)?lái)一篇淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JavaScript模塊化開(kāi)發(fā)之SeaJS
SeaJS是一個(gè)遵循CommonJS規(guī)范的JavaScript模塊加載框架,可以實(shí)現(xiàn)JavaScript的模塊化開(kāi)發(fā)及加載機(jī)制,本文給大家介紹JavaScript模塊化開(kāi)發(fā)之SeaJS,需要的朋友參考下2015-12-12js實(shí)現(xiàn)二級(jí)導(dǎo)航功能
本文主要介紹了js實(shí)現(xiàn)二級(jí)導(dǎo)航功能的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03