jQuery 表格实现

<script type="text/javascript">$(function(){/******实现全选的操作****/$("#chks").click(function(){//获得当前框的勾选状态var  flag=  $("#chks").prop("checked");$("input[name='chk']").prop('checked',flag);})/******实现是否全部勾选的效果*****/$("input[name='chk']").click(function(){//获得所有的单个的勾选框var  inps =$("input[name='chk']");/*for(var  i  in  inp){console.log(inp[i]);}*/var  flag=true;inps.each(function(){//循环体if(!$(this).prop('checked')){//证明至少有一个框没有被勾选flag=false;return;   }})$("#chks").prop('checked',flag);         })/********实现反选的效果***********/$("#fx").click(function(){var  inps =$("input[name='chk']");inps.each(function(){//当前多选框的状态var  flag=   $(this).prop('checked');$(this).prop("checked",!flag)})  })/*****新增一行数据********/$("#addRow").click(function(){$("#ta").append('<tr>'+'<td><input type="checkbox" name="chk" id="" value="4" /></td>'+'<td>《web开发详解》</td>'+'<td>刘老师</td>'+'<td>30</td>'+'</tr>')   })/*****移除指定的数据****/$("#delRow").click(function(){//获得所有被选中的多选框var   v =$("input[name='chk']:checked");if(v.length==0){alert("请至少勾选一行数据")}else{//parent()--获得当前节点的父节点v.parent().parent().remove();}})/******赋值行的操作*******/$("#copyRow").click(function(){//获得被勾选的inputvar   v =$("input[name='chk']:checked");if(v.length==0){alert("请至少选择一行进行复制");}else {//赋值一行var  tr=v.parent().parent().clone();//把复制的行黏贴到指定的表格中$("#ta").append(tr)  }         })})      </script></head><body><h3>jQuery操作表格</h3><hr /><input type="button" id="fx" value="反选" /><input type="button" id="addRow" value="新增一行" /><input type="button" id="delRow" value="删除行" /><input type="button" id="copyRow" value="复制行" /><table border="1px" cellpadding="10px" cellspacing="0" id="ta"><tr><td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td><td width="200px">书名</td><td width="200px">作者</td><td width="200px">数量</td></tr><tr id=""><td><input type="checkbox" name="chk" id="" value="2"/></td><td>《Java编程之道》</td><td>wollo</td><td>10</td></tr><tr><td><input type="checkbox" name="chk" id="" value="3" /></td><td>《Python和我的故事》</td><td>赵老师</td><td>10</td></tr><tr><td><input type="checkbox" name="chk" id="" value="4" /></td><td>《web开发详解》</td><td>张老师</td><td>30</td></tr>            </table>

jQuery 表格实现相关推荐

jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
4、jquery表格操作
1.<html> 2.<head> 3.<title>jquery表格操作</title> 4.<script language="ja ...
html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
jQuery 表格插件
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
jQuery表格的行编辑
jQuery表格的行编辑单击单元格,单元格显示为一个控件然后,在控件中输入或者选择值,失去焦点之后获取该控件的值,显示在单元格中控件可以是input.select.datetime等 Inpu ...
jQuery 表格自动增加
<!DOCTYPE html><html dir="ltr" lang="zh-CN"><head><meta cha ...
jQuery:表格的奇偶行变色，jquery实例之表格隔一行
jQuery:表格的奇偶行变色<html> <head> <title>表格变色</title> <style type="text/c ...
jquery 表格自动拆分（方便打印）插件-printTable
/** * jquery 表格打印插件 * * 作者: LiuJunGuang * 日期:2013年6月4日 * 分页样式(需要自定义): * @media print { * .pageBreak ...
Jquery 表格插件DataTables
[转]Jquery 表格插件DataTables 博客分类: Jquery jquerydatatablesjavascript 1.特性可变长度分页: 动态过滤: 多列排序,带数据类型检测功能: ...
Web jquery表格组件 JQGrid 的使用 - 从入门到精通开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇问题研究里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

jQuery 表格实现

jQuery 表格实现相关推荐

最新文章

热门文章