jQuery应用操作之---表格

示例:

<table>
    <thread>
        <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thread>
    <tbody>
        <tr><td>张三</td><td>男</td><td>宁波</td></tr>
        <tr><td>李四</td><td>男</td><td>杭州</td></tr>
        <tr><td>王五</td><td>男</td><td>长沙</td></tr>
        <tr><td>赵六</td><td>男</td><td>温州</td></tr>
    </tbody>
</table>                

1、隔行变色:
CSS代码:
.even{background:red};
.odd{background:green};
然后分别给奇偶行添加样式如下:
$(function(){
  $("tr:even").addClass(even);
  $("tr:odd").addClass(odd);
});
上述代码会吧表头也算进去,这里需要排除表头<thread>中的<tr>,如下:
$(function(){
  $("<tbody>tr:even").addClass(even);
  $("<tbody>tr:odd").addClass(odd);
});
如果需要对选中行执行高亮,如下:
$("tr:contains(‘张三‘)").addClass("selected");

2、内容筛选
例如要筛选出含有文本“李”的表格行:
$(function(){
  $("table tbody tr").hide()
  filter(":contains(‘李‘)").show();
});
所以,文本框中输入“李”时,就会筛选出相应的表格行,执行代码如下:
$(function(){
  $("filterName").keyup(function(){
    $("table tbody tr").hide()
    filter(":contains(‘"+($(this).val())+"‘)").show();
  }).keyup();
});

时间: 2024-11-10 00:15:21

jQuery应用操作之---表格的相关文章

关于jquery简单操作简单表格

最近在摸索jquery中,想着学习过程中还是记下点自己的东西比较好,不管是日后自己查阅,亦或是对于他人有些许帮助. 也是一件两全其美的事情了. 下面我就简单 贴上自己的html中重要部分了. 具体实现了的内容有: 1. 光标附上 表格隔行变色效果 2. 点击全选按钮 ,选中所有未选中项:或者全选时,取消全选 3. 选中项删除行操作 jquery版本: jquery-3.1.1 一,页面样式表与布局 <div class="tab-ope"> <table> &l

锋利的jQuery第5章 jQuery对表单、表格的操作及更过应用

1,button和checkbox的例子: form表单 <form action=""> 你爱的远动有?<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="蓝球" />

jQuery 常见操作实现方式

一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 $(

jQuery——可以编辑的表格

今天学习了利用jQuery实现可以编辑的表格这个例子.这个例子需求是这样的:在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容.原理:单击客户端表格单元格时,在单元格中添加一个文本框,并将单元格中原来的内容赋值给文本框,再进一步去修改文本框内容,修改后将文本框内容重新赋值给单元格. 源码: 前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="

转:jQuery 常见操作实现方式

http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("")

jQuery 节点操作 筛选二

节点操作 $(content).method( target ) $(content).method( target ) 操作 before() insertBefore() 在目标元素前面插入内容 after() insertAfter() 在目标元素后面插入内容 append() appendTo() 在目标元素开始处插入内容 prepend() preppendTo() 在目标元素结尾处插入内容 replaceWidth() replaceAll() 在目标元素替换为内容 clone()克

jQuery HTML 操作

jQuery 包含很多供改变和操作 HTML 的强大函数. 改变 HTML 内容 语法 $(selector).html(content) html() 函数改变所匹配的 HTML 元素的内容(innerHTML). 实例 $("p").html("W3C HTML"); 查看示例 添加 HTML 内容 语法 $(selector).append(content) append() 函数向所匹配的 HTML 元素内部追加内容. 语法 $(selector).prep

jQuery实现的table表格隔行换色代码实例

jQuery实现的table表格隔行换色代码实例:下面是一段代码实例,能够实现隔行变色的效果,这是网站人性化措施之一,在实际应用中的使用非常广泛.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

Java的JXL操作xls表格

jxl是一个韩国人写的java操作excel的工具, 在开源世界中,有两套比较有影响的API可供使用,一个是POI,一个是jExcelAPI.其中功能相对POI比较弱一点.但jExcelAPI对中文支持非常好,API是纯Java的, 并不依赖Windows系统,即使运行在Linux下,它同样能够正确的处理Excel文件. 另外需要说明的是,这套API对图形和图表的支持很有限,而且仅仅识别PNG格式. 使用如下: 搭建环境 将下载后的文件解包,得到jxl.jar,放入classpath,安装就完成