table表格中，点击checkbox 的value值相加

<!DOCTYPE html>

<html>

<head>

<title>简单的行列相加求和处理</title>

<script src="assets/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        // 横向初始值

        var col_val = 0;

        // 纵向初始值

        var row_val = 0;

        $(".checkboxes").click(function(i) {

            col_val = 0;

            // 获取所有横向的被选中的复选框的值

            $(this).parents("tr").find(".checkboxes").each(function() {

                if ($(this).is(':checked')) {

                    var str = $(this).parent().text();

                    col_val = parseInt(col_val) + parseInt(str);

                }

            });

            // 给最后一个文本框赋值

            if(col_val == 0){

                $(this).parents("tr").find(".coltxt_:eq(0)").val("");

            } else {

                $(this).parents("tr").find(".coltxt_:eq(0)").val(col_val);

            }

            // 数据汇总

            checkrowcount_();

        });

        $('.checkrow_').click(function (){

            // 当前列下标

            row_val = 0;

            var row = $(this).parent().prevAll().length;

            // 获取所有纵向的被选中的复选框的值

            $("#tab tr").each(function(){

                if ($(this).find(".checkrow_:eq('"+row+"')").is(':checked')) {

                    var str = $(this).find("td:eq('"+row+"')").text();

                    row_val = parseInt(row_val) + parseInt(str);

                }

            });

            // 给最后一个文本框赋值

            if(row_val == 0){

                $("#tab").find(".checkrowtext_:eq('"+row+"')").val("");

            } else {

                $("#tab").find(".checkrowtext_:eq('"+row+"')").val(row_val);

            }

            // 数据汇总

            checkrowcount_();

        });

        function checkrowcount_(){

            // 汇总初始值

            var count_ = 0;

            // 获取所有横向文本框里面的值

            $(".coltxt_").each(function(){

                if($(this) != null && $(this).val() != ""){

                    var val_ = $(this).val();

                    count_ = parseInt(count_) + parseInt(val_);

                }

            });

            //$(".checkrowtext_").each(function(){

                //if($(this) != null && $(this).val() != ""){

                    //var val_ = $(this).val();

                    //count_ = parseInt(count_) + parseInt(val_);

                //}

            //});

            // 给最后一个文本框赋值

            if(count_ == 0){

                $("#tab").find(".checkrowcount_:eq(0)").val("");

            } else {

                $("#tab").find(".checkrowcount_:eq(0)").val(count_);

            }

        }

    });

</script>

</head>

<body>

    <table id="tab" border="1">

        <tr>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="100">

                100

            </td>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="50">

                50

            </td>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="10">

                10

            </td>

            <td>

                <input type="text" readonly="readonly" class="coltxt_" value="">

            </td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="30">

                30

            </td>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="20">

                20

            </td>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="60">

                60

            </td>

            <td>

                <input type="text" readonly="readonly" class="coltxt_" value="">

            </td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="20">

                20

            </td>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="40">

                40

            </td>

            <td>

                <input type="checkbox" class="checkboxes checkrow_" value="80">

                80

            </td>

            <td>

                <input type="text" readonly="readonly" class="coltxt_" value="">

            </td>

        </tr>

        <tr>

            <td>

                <input type="text" readonly="readonly" class="checkrowtext_" value="">

            </td>

            <td>

                <input type="text" readonly="readonly" class="checkrowtext_" value="">

            </td>

            <td>

                <input type="text" readonly="readonly" class="checkrowtext_" value="">

            </td>

            <td>

                <input type="text" readonly="readonly" class="checkrowcount_" value="">

            </td>

        </tr>

    </table>

    </br>

</body>

</html>

table表格中，点击checkbox 的value值相加的更多相关文章

用C#写一个函数，在一个数组中找出随意几个值相加等于一个值与迭代器对比
算法!用C#写一个函数,在一个数组中找出随意几个值相加等于一个值比如,数组{1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20} 要找出那些数相加等 ...
table表格实现点击修改 PHP同步数据库排序
最近几天在做一个网站,牵扯到一个导航管理的功能!领导说不用作,可是由于自己自作主张,搞了1天的功能.领导说这个导航管理就是不用做!容易牵扯出好多问题来!估摸是客户小的原因! 没办法就把我1天的劳动荒废 ...
5种做法实现table表格中的斜线表头效果
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法直接去 ...
在table表格中实现圆角效果
在table中设置border-radius发现不起作用,网上查找了一番,原因是border-collapse:collapse和border-radius不兼容. 设计图效果代码实现效果: < ...
table表格整体居中和 table表格中各行各列内容居中
1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...
使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
Java 获取表格中某一个单元格的值
需求搜索页面返回表格样搜索结果, 获取搜索结果中某个单元格的具体值. 以下图为例, 下表是搜索返回的结果, 第一行是各个列的名字, 其它是具体的返回值. 方法1: 根据用户输入的表头名来确定是第几列 ...
table表格中的内容溢出布局方式
什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...
table表格中实现tbody部分可滚动，且thead部分固定
1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...

随机推荐

PT, BPT, VCM
- VCM可以理解为BPT与PPM之间的MIS,并没有比BPT效果好很多 - BPT, VCM这类算法的主要作用是加快caustics的收敛,对indirect diffuse没有很明显的加速 - i ...
线上 ELK 集群健康值 red 状态问题排查与解决
之前一直运行正常的数据分析平台,最近一段时间没有注意发现日志索引数据一直未生成,大概持续了n多天,当前状态: 单台机器, Elasticsearch(下面称ES)单节点(空集群),1000+shrad ...
870. Advantage Shuffle
Given two arrays A and B of equal size, the advantage of A with respect to B is the number of indice ...
POJ - 2031C - Building a Space Station最小生成树
You are a member of the space station engineering team, and are assigned a task in the construction ...
网络CCNA基础了解
关于网络 CCNA.CCNP.CCIE 中的 CCNA 一.逻辑与.或.非 AND --> "与"计算 1 AND 1 = 1(取严) 1 AND 0 = 0 0 AND 1 ...
HTML中特殊字符
HTML中的字符详解特殊符号命名实体十进制编码特殊符号命名实体十进制编码 ! ! " " " # # $ $ % % & & & ' ...
WebStorm 2017 激活方法
https://www.cnblogs.com/woaic/p/6024975.html 注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下 ...
Java - 多线程与锁
进程-线程进程,Process,处于运行中的程序,系统进行资源分配和调度的独立单位,拥有独立的内存空间(堆). 动态性:生命周期和状态: 独立性:独立实体: 并发性:Concurrency,抢占式多 ...
react的一些思考
在做好第一个需求之后,我接到了一个react写的产品,这让我异常的兴奋,终于能写react了开始做的时候整体框架已经搭建好了,这让我有点小失落,我还以为我要开始搭框架了呢,没事,搭的也挺好的. 有了 ...
扩大VirtualBox虚拟机磁盘的方法
之前在VirtualBox里安装了一个XP系统,当时只分配了10G磁盘空间,随着使用,空间不足了. 在虚拟机管理器里不能直接调整磁盘的大小,这里要用到VirtualBox安装目录下的VBoxManag ...

table表格中 ，点击checkbox 的value值 相加

table表格中 ，点击checkbox 的value值 相加的更多相关文章

随机推荐

热门专题

table表格中，点击checkbox 的value值相加

table表格中，点击checkbox 的value值相加的更多相关文章