jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本)。
下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作
1.jQuery代码
<script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//添加行
function AddRow() {
var newRowNumber = $("#tab1>tbody>tr").length+;
$("#tab1>tbody").append("<tr><td><input type='checkbox' name='dateItem' /></td><td>" + newRowNumber + "</td><td><input type='text' style='width:90%' /></td></tr>");
}
//删除行
function DelRow() {
var rowCount = $("#tab1>tbody>tr").length;
var checkedCounts = $("input[type='checkbox'][name='dateItem']:checked").length;
if (checkedCounts > && checkedCounts != rowCount) {
$("input[type='checkbox'][name='dateItem']:checked").each(function () {
$(this).parents("tr").remove();
});
ResetOrder(); //刷新表序号
}
else if (checkedCounts == ) {
alert("请选择!");
}
else if(checkedCounts == rowCount) {
alert("至少保留一行!");
}
}
//刷新表序号
function ResetOrder() {
var rowCount = $("#tab1>tbody>tr").length;
for(var i=;i<rowCount;i++){
$("#tab1>tbody>tr:eq("+i+")>td:eq(1)").html(i+);
}
}
</script>
2.html代码
<div class="table_toolbar">
<a style="width: 50px; color: Blue" onclick="DelRow();">删除</a>
<astyle="width: 50px; color: Blue" onclick="AddRow();">添加</a>
</div>
<div class="table_box_data">
<input type="hidden" id="hid" name="hid" />
<table id="tab1">
<thead>
<tr>
<td width="30px"><input type="checkbox" id="cb_select" title="全选" /></td>
<td width="30px">序号</td>
<td>链接地址</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
<tfoot><tr><td colspan=""></td></tr></tfoot>
</table>
</div>
3.结果
jQuery动态对表格Table进行添加或删除行以及修改列值操作的更多相关文章
- 使用jQuery动态克隆表格,并且添加至div中(使用前需要引入jQuery)
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- 第84天:jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- jQuery——动态给表格添加序号
摘录自:http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html 很多时候遇到需要对表格动态操作,而且一般都会有表格的序号,但是有时候 ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JQUERY动态绘制表格,实现动态添加一行,删除一行
HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...
- jquery动态合并表格行
利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...
- 使用mobile jQuery 动态给select下拉添加数据,选中项默认不显示的解决方法。
getaddress(); function getaddress(type=0,parent='') { var tid=1; $.ajax({ type: "post", ur ...
- 如何使用jQuery动态的在body里添加script标签?
var script = document.createElement('script'); script.type = 'text/jacascript'; script.src = 'url'; ...
- jQuery动态的给页面中添加一条样式表的链接
HTML部分: <input type="button" value="单击" onclick="getbody()" /> & ...
随机推荐
- const 与指针
深入理解const char*p,char const*p,char *const p,const char **p,char const**p,char *const*p,char**const p ...
- SQL server 表中如何创建索引?
SQL server 表中如何创建索引?看个示例,你就会了 use master goif db_id(N'zhangxu')is not nulldrop database zhangxugocre ...
- tomcat配置虚拟目录映射
本文主要介绍web虚拟目录映射的两种常用方法及配置默认web应用的方法 一.在Server.xml中进行配置 在<Host>元素中添加子元素<Context path=" ...
- 程序中使用gc_enable() 和 gc_disable()开启和关闭
在理解PHP垃圾回收机制(GC)之前,先了解一下变量的存储. php中变量存在于一个zval的变量容器中.结构如下: 类型 值 is_ref refcount zval中,除了存储变量的类型和值之外, ...
- Linux系统管理员踢用户的方法
两种方法:1.使用pkill命令 1.1 通过who 或则 w 查看当前连接的用户 例如: w USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT jjony pts/0 ...
- Transform-style和Perspective属性
transform-style属性 transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现.他主要有两个属性值:flat和preserve-3d. transfor ...
- CSS与JavaScript文件的位置
1.CSS 尽量放置在head标签中. 原因: 避免浏览器重新渲染: 避免阻塞JS文件的执行. 注:CSS选择器的解释顺序是 从右向左 的,所以尽量减少选择器的层级. 2.JS 尽量放置在</b ...
- jpush极光推送知识点总结
1.jpushClient.sendPush(pushpayLoad):是发送推送的主要方法 2.pushpayload是具体推送消息.推送对象范围的封装 3.jpushClient.sendPush ...
- js 获取checkbox选中项目
# //获取选中项 $('#submit').click(function () { var check_list = [] $("input[name='ck']:checked" ...
- Ubuntu下设置中文字符集支持(解决中文乱码问题)
一. Ubuntu默认的中文字符编码 Ubuntu默认的中文字符编码为zh_CN.UTF-8,这个可以在/etc/environment中看到: sudo gedit /etc/environment ...