JQuery動態(tài)給table添加、刪除行 改進(jìn)版
更新時間:2011年01月19日 23:42:34 作者:
最近需要使用JQuery動態(tài)操作table,自己整理了一下,可以添加新行,刪除選中的一行或多行,簡單代碼如下
復(fù)制代碼 代碼如下:
<html>
<head>
<title>
</title>
<script src="js/jquery-1.4.2_min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var row_count = 0;
function addNew()
{
var table1 = $('#table1');
var firstTr = table1.find('tbody>tr:first');
var row = $("<tr></tr>");
var td = $("<td></td>");
td.append($("<input type='checkbox' name='count' value='New'><b>CheckBox"+row_count+"</b>")
);
row.append(td);
table1.append(row);
row_count++;
}
function del()
{
var checked = $("input[type='checkbox'][name='count']");
$(checked).each(function(){
if($(this).attr("checked")==true) //注意:此處判斷不能用$(this).attr("checked")==‘true'來判斷。
{
$(this).parent().parent().remove();
}
});
}
</script>
</head>
<body>
<input type="button" value="Add" onclick="addNew();">
<input type="button" value="Delete" onclick="del();">
<div id="rightcontent">
<table id="table1" cellspacing="3" cellpadding="3" border="1">
<tbody>
<tr>
<th>
Add new row,then test the delete function.
</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
您可能感興趣的文章:
- jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
- jquery獲取table中的某行全部td的內(nèi)容方法
- jquery sortable的拖動方法示例詳解
- jQuery操作表格(table)的常用方法、技巧匯總
- jquery easyui 結(jié)合jsp簡單展現(xiàn)table數(shù)據(jù)示例
- jQuery表格插件datatables用法詳解
- jQuery表格插件datatables用法總結(jié)
- jQuery實(shí)現(xiàn)獲取table表格第一列值的方法
- jQuery實(shí)現(xiàn)動態(tài)添加tr到table的方法
- jQuery實(shí)現(xiàn)動態(tài)操作table行
相關(guān)文章
jQuery插件boxScroll實(shí)現(xiàn)圖片輪播特效
本文給大家分享的是使用jQuery插件Boxscroll來實(shí)現(xiàn)簡單的圖片輪播特效的代碼,非常簡單實(shí)用,有需要的小伙伴可以參考下。2015-07-07jQuery結(jié)合CSS制作漂亮的select下拉菜單
對于我來說,標(biāo)準(zhǔn)的HTML元素(Select)已經(jīng)讓我感到討厭。它不能夠正常的在IE瀏覽器上顯示。還有一點(diǎn)就是他并不僅僅包含簡單的文本。本實(shí)例將完全摒棄select元素,通過JQuery和CSS來構(gòu)建DropDown元素。2015-05-05jValidate 基于jQuery的表單驗(yàn)證插件
網(wǎng)上基于jQuery的表單驗(yàn)證插件已有很多,但是這個輪子我還是繼續(xù)做一個,因?yàn)檫@個表單驗(yàn)證插件是從我以前的個人JS框架移值過來的(我已慢慢投入jQuery的懷抱),并且它的驗(yàn)證規(guī)則書寫方式也許會讓你眼前一亮。2009-12-12jQuery DateTimePicker 日期和時間插件示例
jQuery UI很強(qiáng)大,其中的日期選擇插件Datepicker是一個配置靈活的插件,這篇文章主要介紹了jQuery DateTimePicker 日期和時間插件示例,有興趣的可以了解一下。2017-01-01jquery提示 "object expected"的解決方法
在測試代碼的時候,提示object expected,下面的解決方法,可以參考下。2009-12-12jQuery Selectors(選擇器)的使用(六、屬性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡單,全面為基礎(chǔ),不會涉及很深,我的學(xué)習(xí)方法:先入門,后進(jìn)階!2009-12-12