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进行添加或删除行以及修改列值操作的更多相关文章

  1. 使用jQuery动态克隆表格,并且添加至div中(使用前需要引入jQuery)

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  2. 第84天:jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. jQuery——动态给表格添加序号

    摘录自:http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html 很多时候遇到需要对表格动态操作,而且一般都会有表格的序号,但是有时候 ...

  4. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. JQUERY动态绘制表格,实现动态添加一行,删除一行

    HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...

  6. jquery动态合并表格行

    利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...

  7. 使用mobile jQuery 动态给select下拉添加数据,选中项默认不显示的解决方法。

    getaddress(); function getaddress(type=0,parent='') { var tid=1; $.ajax({ type: "post", ur ...

  8. 如何使用jQuery动态的在body里添加script标签?

    var script = document.createElement('script'); script.type = 'text/jacascript'; script.src = 'url'; ...

  9. jQuery动态的给页面中添加一条样式表的链接

    HTML部分: <input type="button" value="单击" onclick="getbody()" /> & ...

随机推荐

  1. const 与指针

    深入理解const char*p,char const*p,char *const p,const char **p,char const**p,char *const*p,char**const p ...

  2. SQL server 表中如何创建索引?

    SQL server 表中如何创建索引?看个示例,你就会了 use master goif db_id(N'zhangxu')is not nulldrop database zhangxugocre ...

  3. tomcat配置虚拟目录映射

    本文主要介绍web虚拟目录映射的两种常用方法及配置默认web应用的方法 一.在Server.xml中进行配置 在<Host>元素中添加子元素<Context path=" ...

  4. 程序中使用gc_enable() 和 gc_disable()开启和关闭

    在理解PHP垃圾回收机制(GC)之前,先了解一下变量的存储. php中变量存在于一个zval的变量容器中.结构如下: 类型 值 is_ref refcount zval中,除了存储变量的类型和值之外, ...

  5. Linux系统管理员踢用户的方法

    两种方法:1.使用pkill命令 1.1 通过who 或则 w 查看当前连接的用户 例如: w USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT jjony pts/0 ...

  6. Transform-style和Perspective属性

    transform-style属性 transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现.他主要有两个属性值:flat和preserve-3d. transfor ...

  7. CSS与JavaScript文件的位置

    1.CSS 尽量放置在head标签中. 原因: 避免浏览器重新渲染: 避免阻塞JS文件的执行. 注:CSS选择器的解释顺序是 从右向左 的,所以尽量减少选择器的层级. 2.JS 尽量放置在</b ...

  8. jpush极光推送知识点总结

    1.jpushClient.sendPush(pushpayLoad):是发送推送的主要方法 2.pushpayload是具体推送消息.推送对象范围的封装 3.jpushClient.sendPush ...

  9. js 获取checkbox选中项目

    # //获取选中项 $('#submit').click(function () { var check_list = [] $("input[name='ck']:checked" ...

  10. Ubuntu下设置中文字符集支持(解决中文乱码问题)

    一. Ubuntu默认的中文字符编码 Ubuntu默认的中文字符编码为zh_CN.UTF-8,这个可以在/etc/environment中看到: sudo gedit /etc/environment ...