js簡單的表格添加行和刪除行操作示例
更新時(shí)間:2014年03月31日 15:31:47 作者:
這篇文章主要介紹了js簡單的表格添加行和刪除行操作,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
//創(chuàng)建一個(gè)html元素
function $c(tagname){
return document.createElement(tagname);
}
//文檔加載完成后要執(zhí)行的內(nèi)容
$(document).ready(function(){
//綁定添加行按鈕的單擊事件
$("#addrow").bind("click",function(){
// 取得table
var tab = $("#tab");
// 創(chuàng)建tr元素
var tr = $c("tr");
// 為table追加tr元素
tab.append(tr);
// 創(chuàng)建td元素
var td1=$c("td");
// td元素的內(nèi)容
td1.innerHTML="insert1";
// 為新追加的tr追加td元素
tr.appendChild(td1);
var td2=$c("td");
td2.innerHTML="insert2";
tr.appendChild(td2);
});
// 綁定刪除行按鈕的單擊事件
$("#deleterow").bind("click",function(){
// 取得table的第一行
var tab = $("#tab tr:eq(0)");
// 刪除此行
tab.remove();
});
});
</script>
</head>
<body>
<table border='1' id="tab">
<tr>
<td>123</td>
<td>456</td>
</tr>
</table>
</br>
<button id="addrow">添加行</button>
<button id="deleterow">刪除行</button>
</body>
</html>
您可能感興趣的文章:
- JS/jQuery實(shí)現(xiàn)超簡單的Table表格添加,刪除行功能示例
- js動(dòng)態(tài)添加表格逐行添加、刪除、遍歷取值的實(shí)例代碼
- js實(shí)現(xiàn)添加刪除表格(兩種方法)
- JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加,修改,刪除功能(推薦)
- 基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行
- 原生JS和JQuery動(dòng)態(tài)添加、刪除表格行的方法
- 動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
- JS小功能(操作Table--動(dòng)態(tài)添加刪除表格及數(shù)據(jù))實(shí)現(xiàn)代碼
- JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)
- js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作
相關(guān)文章
js實(shí)現(xiàn)簡單的網(wǎng)頁換膚效果
本文主要分享了js實(shí)現(xiàn)簡單的網(wǎng)頁換膚效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù)
這篇文章主要介紹了BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù),需要的朋友可以參考下2015-02-02Javascript setInterval的兩種調(diào)用方法(實(shí)例講解)
這篇文章主要是對(duì)Javascript setInterval的兩種調(diào)用方法解析了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11JavaScript簡單遍歷DOM對(duì)象所有屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript簡單遍歷DOM對(duì)象所有屬性的實(shí)現(xiàn)方法,涉及JavaScript針對(duì)頁面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10javascript 響應(yīng)鍵盤特定按鍵(只響應(yīng)數(shù)字鍵)
響應(yīng)鍵盤特定按鍵(只響應(yīng)數(shù)字鍵),大家可以看看思路。2009-03-03