表格操作

最新推荐文章于 2022-04-13 15:08:41 发布
最新推荐文章于 2022-04-13 15:08:41 发布
阅读量408 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kanuoyuan/article/details/37906191
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>操作表格-选择器</title>
<script type="text/javascript" src="class library/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
	$('.tab1 tbody tr:even,.tab2 tbody tr:even,.tab3 tbody tr:even').addClass('odd');
	$('.tab1 tbody tr,.tab2 tbody tr,.tab3 tbody tr').hover(function(){
		$(this).addClass('highlight');
	},function(){
		$(this).removeClass('highlight');
	});
	$('.tab1 tbody tr').click(function(){
		$(this).toggleClass('selected');
	});
	$('.tab2 input[type=checkbox]:checked,.tab3 input[type=radio]:checked').parents('tr').addClass('selected');
    $('.tab2 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');
		}
	});
    $('.tab3 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>


</head>

<body>
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="tab1">
<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="tab2">
<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="tab3">
<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>
</body>
</html>

烧了回忆取暖
关注
专栏目录
LaTeX表格操作
weixin_43848644的博客
04-10 2703
本文介绍了在LaTeX中插入表格的基本操作
Python Excel表格操作总结
dbs1215的专栏
10-18 1748
最近无意中帮一个朋友处理下表格，表格有几千行，让我生成一个新格式的表格 我们看源文件格式 期望生成的格式 对比发现其实只要对源文件第二列“题干”进行解析处理，分别读取出题目、选项(A-G) ；读取第三列的标准答案；识别完成后依次写入新表格即可 先了解下python读取excel工具类，核心就是读写操作，知道后一切就OK了 读操作 import xlrd # 加载文件 workbook = ...
html学习六
weixin_30416497的博客
05-30 72
disabled placehold nanme value 必须是一块的 raadonly只读 其他标签： <iframe name="my Frame" src="" frameborder="0">嵌套另一个网页</iframe> <a href="">跳转到</a> 复习联系 <!DOCTYPE html&...
JavaScript 动态表格操作
wgchen
04-13 5198
阅读目录JavaScript 动态创建表格第一种示例第二种示例示例解析表格相关的属性和方法1.1 Table 对象集合1.2 Table 对象方法1.3 Table 对象常用属性1.4 TableRow 对象TableRow 对象方法TableRow 对象属性1.5 TableCell 对象TableCell 对象属性JavaScript 实现点击显示和隐藏表格技术解答JavaScript 实现动态克隆一个表格技术解答JavaScript 实现动态点击改变单元格颜色技术解答 JavaScript 动态创建表
Word VBA-表格操作汇总
xinlan3618的博客
05-28 4832
=========================== Sub 遍历表格设定样式() For Each aTable In ActiveDocument.Tables With aTable With .Shading .Texture = wdTextureNone .ForegroundPatternColor = wdColorAutomatic .BackgroundPatter
fastadmin表格操作
weixin_43515418的博客
02-18 7043
fastadmin表格操作fastadmin表格操作表格按钮操作表格操作按钮的添加与调试表格编辑按钮传递id操作 fastadmin表格操作 表格按钮操作 此时url为:http://localhost/admin/store/store/coupon/ids/2?ref=addtabs 控制其显示的代码位置在对应路由的html页面,即view/store/store/coupon.html这里...
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽
weixin_33834241的博客
02-23 5946
业务需要前端根据用户权限动态显示对应按钮，直接把操作列的列宽写死的话，在按钮少的情况下不是那么好看，所以想到了一个骚操作...写死宽度时是这样的：开始给操作列绑定宽度属性:width="actionColWidth < 80 ? 80 : actionColWidth"把操作列的所有按钮用一个div套起来class="action-col"...data里设置列宽初始值actionColWi...
计算机表格操作教程,Excel使用教程 Excel表格的10个基本操作
热门推荐
weixin_28809949的博客
07-09 1万+
Excel表格是很多从事行政与财务人员都需要使用到的办公软件。因此，我们今天就为大家介绍一下Excel表格的基本操作，方便一些想要从事这一方面工作的网友可以自学。跟随PConline小编一起了解一下吧。Excel表格的基本操作一：修改字体首先，从输入开始，先来调整字体吧。在工具栏那里一开始就可以发现字体的工具框了，在这里可以快速更改字体类型、大小、颜色等等的。Excel表格的基本操作二：更改对齐方...
Element UI 表格操作列按钮显示不全
长歌的博客
02-23 2343
bug出现情况： 1、页面上存在选项卡 2、选项卡上各自有表格 3、然后按钮下半部分总会被藏起来一些，如下图所示 解决方法： 增加样式： ::v-deep .el-table__fixed-right { height: 100% !important; } ...
QT之Excel表格操作
平凡的人，平凡的路，平凡的人生
01-14 3748
打开Excel文件，读取文件中数据。
金山-WPS 2019 表格操作指引书.docx
01-28
金山-WPS 2019 表格操作指引书 金山-WPS 2019 表格操作指引书是WPS Office 2019 for Linux的一个详细的操作指南，旨在帮助用户掌握表格操作的各项技能。下面是该指南中的一些重要知识点： 一、办公数据录入规范和...
基于jQuery的表格操作插件
12-09
今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。 1.DataTables-强大的jQuery...
富文本编辑器以及表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
04-21
在描述中提到的富文本编辑器集成了表格操作功能，这使得用户可以在编辑区域内创建和编辑表格，这对于数据展示和组织信息非常有用。表格操作通常包括以下方面： 1. **创建表格**：用户可以通过点击编辑器菜单中的...
js表格操作，DOM实现数据动态增删查改
12-02
通过以上步骤，你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求，为用户提供直观的界面和流畅的操作体验。在实际项目中，可能还需要处理更复杂的交互逻辑，如表单验证...
parents()用法
回忆独殇的专栏
07-15 963
parents用法 $(document).ready(function(){ $('a').hover(function(){ $(this).parents('p').addClass('highlight'); },function(){ $(this).parents('p').removeClass('highlight'); }); }); .highlight{
特殊符号
回忆独殇的专栏
01-18 730
语句中带有符号时：alert($("#yy\\#jwt")).tetx());   【alert($("#yy#jwt")).tetx()); 没有用转义符号语句，内容不能被弹出】 插有特殊符号时用\\(转义符号)来实现
可以用jQuery代替$避免冲突
回忆独殇的专栏
07-15 667
可以用jQuery代替$避免冲突 jQuery(document).ready(function(){ jQuery('tbody tr').click(function(){ jQuery(this).toggleClass('yellow'); }); }); td { padding:5px; border-bottom:1px solid blue;} .yellow{ b
表单选择器记录
回忆独殇的专栏
01-18 653
第1页 第2页 第3页
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值