JS实现自定义工具类,隔行换色、复选框全选、隔行高亮等
很多功能都可以放在js的工具类中,在使用的时候直接调用
本次实现的功能包括:
/**
0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中
1.隔行换色
2.复选框的全选效果
3.实现表格的高亮显示
4.计算输入了多少个字
*/
以下整体案例使用的简略的table代码HTML部分(未给出样式部分):
<div class="form-group">
<table id="tabMain" class="formTable" style="width:350px;height:180px;">
<thead>
<tr class="">
<td title="id"><input type="checkbox" id="checkall" onclick="checkAll(this);" ></td>
<td title="name"> 名称 </td>
<td title="hight"> 高度 </td>
<td title="weight"> 宽度 </td>
<td title="big"> 大小 </td>
</tr>
</thead>
<tbody>
<tr style="width:400px;">
<td title="id"><input name="checkOne" type="checkbox" ></td>
<td title="name"> 矿泉水 </td>
<td title="hight"> 20 </td>
<td title="weight"> 10 </td>
<td title="big"> 500 </td>
</tr>
<tr >
<td title="id"><input type="checkbox" name="checkOne"></td>
<td title="name"> 大象 </td>
<td title="hight"> 1810 </td>
<td title="weight"> 2220 </td>
<td title="big"> 10 </td>
</tr>
<tr >
<td title="id"><input type="checkbox" name="checkOne"></td>
<td title="name"> 苹果 </td>
<td title="hight"> 11 </td>
<td title="weight"> 32 </td>
<td title="big"> 300 </td>
</tr>
</tbody>
</table>
</div>
案例一: 当点击表的整行的任意位置时,第一列的复选框或者单选框均选中
1 $.fn.zTableSelectBind = function(option) {
2 var inputType = "checkbox";
3 if(option && option.type) {
4 inputType = option.type;
5 }
6 $(this).find("tbody tr").click(function(e) {
7 var $obj = $(this).find("td:eq(0) input[type='" + inputType+ "']");
8 var checked = $obj.prop("checked");
9 $obj.prop("checked", !checked);
10 });
11 }
12
13 function initTableClick(tableHandle) {
14 $(tableHandle).zTableSelectBind();
15 }
使用的时候,直接传入表格的id调用:
1 function init() {
2 initTableClick("#tabMain");
3 }
案例二:隔行换色并且鼠标移入时高亮显示
1 $.fn.zTableChangeColor = function(option,option1) {
2 var trObj = $(this).find("tbody tr");
3 if(trObj != 'undefined') {
4 for(var i = 0; i < trObj.length; i++) {
5 var color = i % 2 == 0 ? "#4479E" : "white";
6 $(trObj[i]).attr("bgcolor", color);
7
8 trObj[i].onmouseover = function() {
9 this.setAttribute("bgc", this.style.backgroundColor);
10 this.style.backgroundColor = "#A0B9E1";
11 }
12 trObj[i].onmouseout = function() {
13 this.style.backgroundColor = this.getAttribute("bgc");
14 }
15 }
16 }
17 }
18 function initTableColor(tableHandle) {
19 $(tableHandle).zTableChangeColor();
20 }
调用
1 function init() {
2 initTableClick("#tabMain");
3 initTableColor("#tabMain");
4 }
案例三:复选框的全选效果
1 //实现复选框的全选效果
2 function checkAll(e) {
3 var checkOnes = document.getElementsByName("checkOne");
4 for(var i = 0; i < checkOnes.length; i++) {
5 checkOnes[i].checked = checkAllEle.checked;
6 }
7 }
案例四:计算输入了多少个字
1 function calculateChar() {
2 var sVal = $("#descript").val();
3 if(sVal.len > 256) {
4 sVal = sVal.substring(0.256);
5 $("#descript").val(sVal);
6 }
7 $("#charP").html(sVal.length);
8 }
JS实现自定义工具类,隔行换色、复选框全选、隔行高亮等的更多相关文章
- jQuery中的几个案例:隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- js实现复选框全选
HTML代码如下: <div> <label><input type="checkbox" name="aAll">全选&l ...
- js复选框全选反选
本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...
随机推荐
- acwing 890. 能被整除的数
#include<bits/stdc++.h> #define ll long long using namespace std; int m; int n,p[20]; int sum, ...
- log4j配置相对路径实现日志记录
从网上简单搜索了一下,发现有三种介绍的方法.总结在这里1. 解决的办法自然是想办法用相对路径代替绝对路径,其实log4j的FileAppender本身就有这样的机制,如: log4j.appender ...
- 根据使用者反馈,对开源项目 go-gin-api 新增两个功能
目录 前言 接口返回的错误信息支持中英文 代码位置 使用方式 错误信息自定义 参数验证的错误信息支持中英文 代码位置 使用方式 错误信息语言包 示例 小结 推荐阅读 前言 根据使用者的反馈,对开源项目 ...
- ftp错误&&详解方案
一.FTP错误代码列表150 文件状态良好,打开数据连接 200 命令成功 202 命令未实现 211 系统状态或系统帮助响应 212 目录状态 213 文件状态 214 帮助信息,信息仅对人类用户有 ...
- 『心善渊』Selenium3.0基础 — 29、使用HTMLTestRunner生成unittest的HTML报告
目录 1.HTMLTestRunner介绍 2.HTMLTestRunner的使用 3.测试报告示例 4.封装成模块 1.HTMLTestRunner介绍 HTMLTestRunner是一个基于uni ...
- JAVA入门基础及流程控制
JAVA入门基础及流程控制 数据类型 位 存储单位 eg:0001 0011 八位 字节 byte 处理数据单位 一字节等于八位 eg:1b=0011 0001 类变量: static int num ...
- C++ 标准模板库(STL)——容器(Containers)的用法及理解
C++ 标准模板库(STL)中定义了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量(vector).队列(queue).栈(stack).set.map等.这次主要 ...
- 教你 PXE高效批量网络装机
PXE高效批量网络装机一.PXE概述① PXE (Preboot eXcution Environment)② PXE批量部署的优点③ 服务端④ 客户端二.部署PXE远程安装服务搭建PXE远程安装服务 ...
- Selenium自动化测试框架Ride使用XLRD对于Excel测试数据的管理和操作
Python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 一.安装xlrd模块 到python官网下载http://pypi.pytho ...
- 关于hive的基础
Hive基础 1.引入原因 对存在HDFS上的文件或HBase中的表进行查询时,是要手工写一堆MapReduce代码 对于统计任务,只能由懂MapReduce的程序员才能搞定 事实上,许多底层细节实际 ...