利用js動態(tài)添加刪除table行的示例代碼
如下所示：
//動態(tài)添加行
function addRow(){
var table = document.getElementById("tableID");
var newRow = table.insertRow(); //創(chuàng)建新行
var newCell1 = newRow.insertCell(); //創(chuàng)建新單元格
newCell.innerHTML = ""； //單元格內(nèi)的內(nèi)容
newCell.setAttribute("align","center"); //設(shè)置位置
}
//動態(tài)刪除行
function deleteRow(){
var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
var styles = document.getElementById("tableID");
styles.deleteRow(rowIndex);
}
<html>
<head>
<title></title>
</head>
<body>
<table id="testTbl" border=1>
<tr>
<td>
產(chǎn)品名稱
</td>
<td>
產(chǎn)品數(shù)量
</td>
<td>
產(chǎn)品單價
</td>
</tr>
<tr>
<td>
<select name="a">
<option value="電子">電子</option>
<option value="電器">電器</option>
</select></td>
<td>
<input type="text" name="b">
</td>
<td>
<input type="text" name="c">
</td>
</td>
</table>
<input type="button" name="Submit2" value="添加" onclick="addRow()">
<script>
function addRow(){
//添加行
var newTr = testTbl.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//設(shè)置列內(nèi)容和屬性
newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;
newTd1.innerText = document.all("b").value;
newTd2.innerText = document.all("c").value;
newTd3.innerHTML= '<input type="button" name="del" value="刪除" onclick="del(this)">';
}
function del(o)
{
var t=document.getElementById('testTbl');
t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</script>
</body>
</html>
相關(guān)文章
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)拖拽位置預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了JavaScript添加隨滾動條滾動窗體的方法,涉及JavaScript事件響應及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
javascript結(jié)合Cookies實現(xiàn)瀏覽記錄歷史
最近在工作當中遇到一個問題 有個頁面需要添加一個瀏覽歷史記錄功能，具體來說就是要記錄下用戶在此網(wǎng)站的點擊歷史 并把它們降序排列出來（只顯示前6個瀏覽歷史而且不能重復）。2008-09-09
這篇文章主要介紹了JS實現(xiàn)為表格動態(tài)添加標題的方法,涉及javascript中createCaption方法添加標題的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript制作淘寶星級評分效果的整個思考過程，思路很清晰，并附帶了完整的程序源碼，感興趣的小伙伴們可以參考一下2015-11-11
js使用DOM設(shè)置單選按鈕、復選框及下拉菜單的方法
這篇文章主要介紹了js使用DOM設(shè)置單選按鈕、復選框及下拉菜單的方法,較為詳細的分析了單選按鈕、復選框及下拉菜單的具體用法及實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
微信小程序?qū)崿F(xiàn)上傳word、txt、Excel、PPT等文件功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)上傳word、txt、Excel、PPT等文件功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
Electron是一個用于構(gòu)建跨平臺桌面應用程序的框架,它結(jié)合了Node.js和Chromium,本文主要介紹了如何使用Electron實現(xiàn)截圖功能,感興趣的可以了解一下2024-12-12
JsBarcode是一個用JavaScript編寫的條形碼生成器,它支持多種條形碼格式,可在瀏覽器和Node.js中使用,下面這篇文章主要給大家介紹了關(guān)于JS使用jsBarcode生成條形碼(一維碼)的相關(guān)資料,需要的朋友可以參考下2023-03-03
今天上午抽空隨手寫了個星級評分的效果，給大家分享下。由于水平有限，如有問題請指出;首先要準備一張星星的圖片，灰色是默認狀態(tài)，黃色是選擇狀態(tài)，需要的朋友可以參考下2012-12-12