jQuery--操作表格(table).

最新推荐文章于 2023-06-30 14:59:42 发布
最新推荐文章于 2023-06-30 14:59:42 发布
阅读量117 收藏
点赞数
文章标签： jQuery XHTML HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zpwmail/article/details/83490326
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

$(document).ready(function(){
//demo1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
function() {$(this).toggleClass('selected');}
);

//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);

// 如果复选框默认情况下是选择的，变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked','checked');
}
}
);

//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);

// 如果单选框默认情况下是选择的，变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');

// 单选框
$('.cssraindemo3 tbody tr').click(
function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
$(this).find('input[type="radio"]').attr('checked','checked');
}
);


});


//-->
</SCRIPT>


<style type="text/css">
h1 { font:bold 20px/26px Arial;}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>


<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<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>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>


<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>

</tbody>
</table>


<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>

</tbody>
</table>
zpwmail
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery-treegrid 树形表格组件
12-25
- **编辑与操作**：允许用户对表格中的数据进行添加、编辑和删除等操作。 - **自定义样式**：通过CSS可以轻松定制表格样式，满足个性化需求。 - **事件处理**：提供多种事件回调，如展开/折叠、点击等，便于扩展功能...
tableExport.jquery.plugin-1.10.22.zip
03-29
总的来说，"tableExport.jquery.plugin-1.10.22.zip"是前端开发中一个便捷的工具，它通过jQuery实现了表格数据的快速导出，提升了用户体验，简化了开发者的工作。无论是在企业级应用还是个人项目中，都能看到其广泛...
jQuery的笔记
内事问度娘，外事问谷歌！
01-08 79
1. 排除头部给行添加样式 例如: &lt;table&gt; &lt;thead&gt; &lt;tr&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt;&lt;td&gt;梁继龙&lt;/td&am
前端获取选中复选框各行的值
baidu_38995168的博客
06-15 1213
前端代码： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导入Exc...
按照勾选 删除表格的行<tr>
weixin_34390996的博客
10-10 184
需求描述：有一个产品列表，有一个删减按钮，点击删减按钮，按照产品勾选的行，删除产品列表中对应的行数据 代码： //html代码<table id="table1"> <tr th:each="prod : ${list}" th:id="${prod.productId}"> <td> <label class="mt-checkb...
table获取checkbox是否选中的几种方法
chen254810107的专栏
04-19 6711
function test() { $(".table tbody tr").find("td:first input:checkbox").each(function () { var ischecked = $(this).prop("checked"); alert(ischecked); }); $(".table input:
jQuery--表格隔行变色
qq_52567967的博客
09-27 2286
jQuery--表格隔行变色
JQuery表格Table操作-获取表格数据/向表格填充数据
qq_47189438的博客
06-30 1652
使用JQuery获取表格数据/向表格填充数据
用 jquery.table2excel.js 导出ajax动态生成的table
代码笔记
09-10 1109
用 jquery.table2excel.js 导出ajax动态生成的table
Bootstrap-Table事件和方法
bluebird2的专栏
06-27 2166
本文章为整理之后的，仅供参考 官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 事件的调用方法，前面有过案例 $('#table').bootstrapTable({ data: "", uniqueId: "id", locale: "zh-CN", columns: [], ....... }); 事件名称 JQuery事件
jquery.treegrid结合Bootstrap Table实现树表格
luxinghong199106的博客
04-15 1874
这是实现树表格的另外一种方式。如果采用jqgrid，可以直接用它自带的实现，参考另一篇博客。 直接上代码 <!doctype html> <html> <head> <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <!--<l...
bootstrap-table实现 行拖拽 插件jquery.tablednd.js bootstrap-table-reorder-rows.js
11-07
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
tableExport.jquery.plugin-master
11-09
在实际使用过程中，开发者首先需要在网页中引入jQuery库和tableExport插件的JS文件，然后通过jQuery选择器找到目标表格，并调用相应的导出方法，例如`tableExport()`。通过传递不同的参数，可以控制导出的具体行为。...
jquery.table2excel.js 一键生成Excel表格
09-25
jquery.table2excel.js 可一键生成Excel表格,需要jQuery.js支持 详细使用方法可见我的博客 https://blog.csdn.net/weixin_42571089/article/details/108799543
带你学习JQuery：表格处理
hitxueliang的专栏
09-07 782
最简单的，普通隔行变色： http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  $(fu
数据分析的核心技能和方法
07-19
数据分析的核心技能和方法
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包
07-19
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 平湖人寿保险公司保险销售网站分为用户和管理员两个部分 前台部分（用户界面）： 1、资讯浏览功能： （1）新闻资讯浏览 （2）新闻资讯查询 （3）公司简介 （4）通知公告 2、用户登录注册功能： （1）注册 （2）登录 3、用户管理功能 （1）个人信息管理 （2）订单管理 4、保险购买功能： （1）保险产品浏览 （2）保险产品查询 （3）保险产品购买 后台管理（管理员界面） 1、管理员登录功能： 管理员在管理员登录界面输入用户名和密码，即可登录管理员的界面。 2、资讯管理功能： （1）新闻资讯管理 （2）公司简介管理 （3）通知公告管理 3、保险产品管理： （1）保险产品信息管理 （2）保险产品查询 4、会员管理： （1）会员删除 （2）会员级别管理 5、统计管理： （1）保险产品销售量统计 （2）有效会员数量统计 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包
最新发布
07-19
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 题库 试卷信息管理 阅卷 统计功能 包含：源码、数据库脚本、环境工具包、相同框架项目的安装教程（在说明文档中）
jquery.tablesorter.js:638 Uncaught TypeError: Cannot read properties of undefined (reading 'type') at multisort (jquery.tablesorter.js:638:54) at HTMLTableElement.<anonymous> (jquery.tablesorter.js:855:45) at HTMLTableElement.dispatch (jquery-1.7.2.js:3332:9) at HTMLTableElement.eventHandle (jquery-1.7.2.js:2941:28) at Object.trigger (jquery-1.7.2.js:3210:12) at HTMLTableElement.<anonymous> (jquery-1.7.2.js:3869:17) at Function.each (jquery-1.7.2.js:660:20) at init.each (jquery-1.7.2.js:271:17) at init.trigger (jquery-1.7.2.js:3868:15) at HTMLTableElement.<anonymous> (jquery.tablesorter.js:869:31) 这个报错啥原因
07-13
请将上述代码中的 `#your-table-id` 替换为你实际需要应用 TableSorter 插件的表格的 ID 或选择器。 如果以上解决方案都不能解决问题，请提供更多关于你的代码和环境的详细信息，以便我能够更好地帮助你解决这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值