很多功能都可以放在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实现自定义工具类,隔行换色、复选框全选、隔行高亮等的更多相关文章

  1. jQuery中的几个案例:隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  2. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  3. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  5. FineReport——JS二次开发(复选框全选)

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  6. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

  7. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  8. js实现复选框全选

    HTML代码如下: <div> <label><input type="checkbox" name="aAll">全选&l ...

  9. js复选框全选反选

    本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. acwing 890. 能被整除的数

    #include<bits/stdc++.h> #define ll long long using namespace std; int m; int n,p[20]; int sum, ...

  2. log4j配置相对路径实现日志记录

    从网上简单搜索了一下,发现有三种介绍的方法.总结在这里1. 解决的办法自然是想办法用相对路径代替绝对路径,其实log4j的FileAppender本身就有这样的机制,如: log4j.appender ...

  3. 根据使用者反馈,对开源项目 go-gin-api 新增两个功能

    目录 前言 接口返回的错误信息支持中英文 代码位置 使用方式 错误信息自定义 参数验证的错误信息支持中英文 代码位置 使用方式 错误信息语言包 示例 小结 推荐阅读 前言 根据使用者的反馈,对开源项目 ...

  4. ftp错误&&详解方案

    一.FTP错误代码列表150 文件状态良好,打开数据连接 200 命令成功 202 命令未实现 211 系统状态或系统帮助响应 212 目录状态 213 文件状态 214 帮助信息,信息仅对人类用户有 ...

  5. 『心善渊』Selenium3.0基础 — 29、使用HTMLTestRunner生成unittest的HTML报告

    目录 1.HTMLTestRunner介绍 2.HTMLTestRunner的使用 3.测试报告示例 4.封装成模块 1.HTMLTestRunner介绍 HTMLTestRunner是一个基于uni ...

  6. JAVA入门基础及流程控制

    JAVA入门基础及流程控制 数据类型 位 存储单位 eg:0001 0011 八位 字节 byte 处理数据单位 一字节等于八位 eg:1b=0011 0001 类变量: static int num ...

  7. C++ 标准模板库(STL)——容器(Containers)的用法及理解

    C++ 标准模板库(STL)中定义了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量(vector).队列(queue).栈(stack).set.map等.这次主要 ...

  8. 教你 PXE高效批量网络装机

    PXE高效批量网络装机一.PXE概述① PXE (Preboot eXcution Environment)② PXE批量部署的优点③ 服务端④ 客户端二.部署PXE远程安装服务搭建PXE远程安装服务 ...

  9. Selenium自动化测试框架Ride使用XLRD对于Excel测试数据的管理和操作

      Python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 一.安装xlrd模块 到python官网下载http://pypi.pytho ...

  10. 关于hive的基础

    Hive基础 1.引入原因 对存在HDFS上的文件或HBase中的表进行查询时,是要手工写一堆MapReduce代码 对于统计任务,只能由懂MapReduce的程序员才能搞定 事实上,许多底层细节实际 ...