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的宽度 ...
随机推荐
- linux命令之进程管理命令
1.ps:查看进程 该命令用于列出命令执行时刻的进程快照,如果想要动态的显示进程信息,可以使用top命令. 参数 说明 a(常用) 显示与终端相关的所有进程,包含每个进程的完整路径 x(常用) 显示与 ...
- WEB新手之do u know caidao?
继续写题. 进入该网站,可以看到显然题目给出了一个假的flag.再看第二句话,说题目里存在shell.于是用御剑扫描一下后台. 如上图所示,扫出了一个叫shell的包.于是常识性地在URL加上shel ...
- “全栈2019”Java第二十六章：流程控制语句中循环语句do-while
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- Servlet实现禁用cookie重写URL获取session
前言 一个女人让他的程序员丈夫去商店买东西:你去附近的商店买些鸡蛋,如果有香蕉的话,买8个回来,这个丈夫买了8个鸡蛋回来,他的妻子大吃一惊:你为什么买了8个鸡蛋?! 程序员丈夫回答:因为他们有香蕉. ...
- [Objective-C语言教程]数字（13）
在Objective-C编程语言中,要以对象形式保存基本数据类型,如:int,float,bool.Objective-C提供了一系列与NSNumber一起使用的方法,一些常用重要的方法列在下表中. ...
- nginx高性能WEB服务器系列之七--nginx反向代理
nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...
- 队列优化dijsktra(SPFA)的玄学优化
转载:大佬博客 最近想到了许多优化spfa的方法,这里想写个日报与大家探讨下 前置知识:spfa(不带任何优化) 由于使用较多 STLSTL ,本文中所有代码的评测均开启 O_2O2 优化 对一些数 ...
- Maven环境下面多项目之间的引用
如图: https://github.com/sdl/odata-example sdl OData例子包含了4个项目,下载到本地后编译.发现只有model项目是可以编译过去了.其他几个暂时编译不过 ...
- 《软件工程综合实践专题》第三次作业——原型工具Axure RP8 的介绍
一.为什么使用Axure Axure RP是一个专业的快速原型设计工具. Axure RP已被一些大公司采用.Axure RP的使用者主要包括商业分析师.信息架构师.可用性专家.产品经理.IT咨询师. ...
- docker 查看容器信息---格式化
镜像,ID,端口号,状态 docker ps -a --format "table {{.Image}}\t{{.ID}}\t{{.Ports}}\t{{.Status}}" 列出 ...