動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
<html>
<head>
<script language="javascript">
//窗口表格增加一行
function addNewRow(){
var tabObj=document.getElementById("myTab");//獲取添加數(shù)據(jù)的表格
var rowsNum = tabObj.rows.length; //獲取當(dāng)前行數(shù)
var colsNum=tabObj.rows[rowsNum-1].cells.length;//獲取行的列數(shù)
var myNewRow = tabObj.insertRow(rowsNum);//插入新行
var newTdObj1=myNewRow.insertCell(0);
newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";
var newTdObj2=myNewRow.insertCell(1);
newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";
var newTdObj3=myNewRow.insertCell(2);
newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";
var newTdObj4=myNewRow.insertCell(3);
newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+rowsNum+" style='width:60px' />";
}
//窗口表格刪除一行
function removeRow(){
var chkObj=document.getElementsByName("chkArr");
var tabObj=document.getElementById("myTab");
for(var k=0;k<chkObj.length;k++){
if(chkObj[k].checked){
tabObj.deleteRow(k+1);
k=-1;
}
}
}
</script>
</head>
<body>
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="刪除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
<tr>
<td width="40px" class="top-bt liebiao-c" align="center" >操作</td>
<td width="40px" class="top-bt liebiao-c" align="center" >序號(hào)</td>
<td class="top-bt liebiao-c" align="center" >節(jié)點(diǎn)名稱</td>
<td width="80px" class="top-bt liebiao-c" align="center" >節(jié)點(diǎn)比例</td>
</tr>
</table>
</body>
</html>
- JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法分析
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)生成表格并提交表格數(shù)據(jù)向后端
- JS控制網(wǎng)頁(yè)動(dòng)態(tài)生成任意行列數(shù)表格的方法
- js動(dòng)態(tài)生成指定行數(shù)的表格
- JS實(shí)現(xiàn)從表格中動(dòng)態(tài)刪除指定行的方法
- JS對(duì)HTML表格進(jìn)行增刪改操作
- 基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行
- JavaScript獲取表格(table)當(dāng)前行的值、刪除行、增加行
- JavaScript動(dòng)態(tài)生成帶刪除行功能的表格
相關(guān)文章
js showModalDialog彈出窗口實(shí)例詳解
本篇文章主要是對(duì)js showModalDialog彈出窗口進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01js實(shí)現(xiàn)根據(jù)身份證號(hào)自動(dòng)生成出生日期
這篇文章主要介紹了js實(shí)現(xiàn)根據(jù)身份證號(hào)自動(dòng)生成出生日期,需要的朋友可以參考下2015-12-12如何HttpServletRequest文件對(duì)象并儲(chǔ)存
這篇文章主要介紹了如何HttpServletRequest文件對(duì)象并儲(chǔ)存,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08JavaScript基于對(duì)象方法實(shí)現(xiàn)數(shù)組去重及排序操作示例
這篇文章主要介紹了JavaScript基于對(duì)象方法實(shí)現(xiàn)數(shù)組去重及排序操作,涉及javascript基于對(duì)象方法的數(shù)組遍歷、比較、去重、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07javascript getBoundingClientRect() 來獲取頁(yè)面元素的位置的代碼[修正版]
該方法已經(jīng)不再是IE Only了,F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法,可以說在獲得頁(yè)面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必須通過循環(huán)來獲得元素在頁(yè)面中的絕對(duì)位置。2009-05-05JavaScript通過改變文字透明度實(shí)現(xiàn)的文字閃爍效果實(shí)例
這篇文章主要介紹了JavaScript通過改變文字透明度實(shí)現(xiàn)的文字閃爍效果,結(jié)合完整實(shí)例形式分析了javascript基于定時(shí)器周期性動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04微信小程序網(wǎng)絡(luò)封裝(簡(jiǎn)單高效)
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)封裝(簡(jiǎn)單高效),微信小程序的網(wǎng)絡(luò)請(qǐng)求很便捷,直接調(diào)用就可以了。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08通過javascript的匿名函數(shù)來分析幾段簡(jiǎn)單有趣的代碼
想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷,也曾經(jīng)碰到過幾個(gè)由匿名函數(shù)造成的困擾(其中一個(gè)就是由閉包引起的),下面就整理幾段簡(jiǎn)單代碼討論一下,讓我們大家一起進(jìn)步。2010-06-06