快捷導(dǎo)航

JQuery實(shí)現(xiàn)動態(tài)表格點(diǎn)擊按鈕表格增加一行

更新時(shí)間：2014年08月24日 09:24:18 投稿：whsnow

動態(tài)表格,功能為點(diǎn)擊添加按鈕，表格增加一行并給其name屬性賦予的值，點(diǎn)擊刪除，自動刪除這一行，具體實(shí)現(xiàn)如下

功能實(shí)現(xiàn)：點(diǎn)擊添加按鈕，表格增加一行并給其name屬性賦予的值，方便獲取

點(diǎn)擊刪除，自動刪除這一行

JQuery中定義一個(gè)count變量

var count = 1;
function add() {
var tbl = document.all.ci;
var rows = tbl.rows.length;
var tr = tbl.insertRow(rows);

var e_id = tr.insertCell(0);
e_id.innerHTML = '<input type="text" name="e_id' + count + '" size="7" />';

var class_id = tr.insertCell(1);
class_id.innerHTML = '';

var memo = tr.insertCell(2);
memo.innerHTML = '<input type="text" name="memo' + count + '" size="14" />';

var del = tr.insertCell(3);
del.innerHTML = '<input type="button" onclick="del(this)" value="刪除" />';
count++;
}

function del(btn) {
var tr = btn.parentElement.parentElement;
var tbl = tr.parentElement;
if (tr.rowIndex >= 1) {
tbl.deleteRow(tr.rowIndex);
} else {

}
};

您可能感興趣的文章:

相關(guān)文章

jquery操作checked屬性以及disabled屬性的多種方法
這篇文章主要介紹了jquery控制checked屬性以及disabled屬性的多種方法,下面只提到checked,其實(shí)disabled在jquery里的用法和checked是一模一樣的,需要的朋友可以參考下
2014-06-06
JQuery EasyUI 結(jié)合ztrIee的后臺頁面開發(fā)實(shí)例
下面小編就為大家?guī)硪黄狫Query EasyUI 結(jié)合ztrIee的后臺頁面開發(fā)實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
jQuery代碼性能優(yōu)化的10種方法
之前，我們減少字節(jié)數(shù)和請求次數(shù)以及加載順序以使頁面加載的更快。如今，我們越來越多的注意到另一個(gè)影響網(wǎng)站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架，使節(jié)點(diǎn)選擇和DOM操作變得越來越容易，如果使用不當(dāng)，有可能影響整個(gè)網(wǎng)頁的響應(yīng)速度。
2016-06-06
Jquery 常用方法經(jīng)典總結(jié)
Jquery 常用方法，學(xué)習(xí)jquery的朋友可以參考下。
2010-01-01
jquery表單驗(yàn)證插件validation使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jquery表單驗(yàn)證插件validation使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
整理的40個(gè)有用的jQuery技術(shù)和教程
jQuery確實(shí)是一項(xiàng)偉大的技術(shù)，通過jQuery的插件，我們可以方便的創(chuàng)建具有更好用戶界面的網(wǎng)站。在本文中，將和大家分享40個(gè)對你創(chuàng)建更好用戶界面的jQuery技術(shù)和教程。
2011-01-01
jQuery 學(xué)習(xí) 幾種常用方法
jQuery中為我們提供了很多有用的方法和屬性，自己總結(jié)的一些常用的函數(shù)，方法。個(gè)人認(rèn)為在開發(fā)中會比較常用的，僅供大家學(xué)習(xí)和參考。
2009-06-06
jQuery dateRangePicker插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery dateRangePicker插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
jQuery在頁面加載時(shí)動態(tài)修改圖片尺寸的方法
這篇文章主要介紹了jQuery在頁面加載時(shí)動態(tài)修改圖片尺寸的方法,實(shí)例分析了jQuery操作圖片的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery學(xué)習(xí)筆記之jQuery中的$
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之jQuery中的$的相關(guān)資料,需要的朋友可以參考下
2015-01-01