2 fashion1993 fashion1993 于 2014.12.01 13:41 提问

如何用jquery去对表格的每一行每一列的数值进行求和

修改一个单元格的数值,表格最后一行,最后一列显示的加和也随之改变

2个回答

showbo
showbo   Ds   Rxr 2014.12.01 14:03

通过dom关系获取tr后进行计算赋值

var ipts ;
$('#tb input').not('[readonly]').change(function () {
    var sum = 0, v;
    $('#tb tr').each(function () {
        ipts = $(this).find('input');
        v = (parseFloat(ipts.eq(0).val()) || 0) * (parseFloat(ipts.eq(1).val()) || 0)
        ipts.eq(2).val(v);
        sum += v;
    });
    $('#total').val(sum);
});

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<table id="tb">
<tr><th>单价</th><th>数量</th><th>小计</th></tr>
<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" readonly/></td></tr>
<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" readonly/></td></tr>
<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" readonly/></td></tr>
<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" readonly/></td></tr>
<tr><td>总计:</td><td><input type="text" id="total" readonly /></td></tr>
</table>
showbo
showbo 回复fashion1993: .change改为.keyup
3 年多之前 回复
fashion1993
fashion1993 再打扰一下,如果我想在输入数值的同时就开始求和,该怎么实现
3 年多之前 回复
laiconglin
laiconglin   2014.12.01 16:44

http://jsfiddle.net/hgeL44rz/2/

使用jQuery的话,很方便就可以得出了。
这里需要说明一下的是,使用each函数,以及bind函数来绑定change keyup这两个事件。
然后就可以得出你想要的,随着输入的数值的改变而改变了。

jsfiddle可以打开吗?

$(document).ready(function(){
function updateSum() {
    var totalSum = 0;
    $("td input.singleTotal").each(function() {
        var p = $(this).parent().parent();
        var sum = 0;
        sum = parseInt(p.find("input:eq(0)").val()) * parseInt(p.find("input:eq(1)").val());
        $(this).val(sum);
        totalSum += sum;
    });
    $("td input#total").val(totalSum);
}
updateSum();
$("td input.input").bind("change keyup", function() {
    updateSum();
});
});
laiconglin
laiconglin 回复fashion1993: 能够用了就好。change是指有变化的时候触发时间,keyup是当有按键起来的时候触发,还有一个事件是keydown印象中,不过keydown用的比较少貌似。大家比较习惯用keyup来检测是否有新的输入。
3 年多之前 回复
fashion1993
fashion1993 用你方法,好像就可以实现,我试一下
3 年多之前 回复
fashion1993
fashion1993 如果我想在输入数值的同时就开始求和,该怎么实现,用change就不行了吧
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js对当前表格各列数据的求和
/* * 表格求和。 * table 表示当前求和的表格 * trs 表示表格的所有行 * startRow 表示开始的行数 * startColumn 表示开始的列数 * endColumn 表示求和结束的列数 * */ function sumFun(table,trs
Jquery、js计算table列合计
利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便。xia
jQuery 点击table一行 并对当前行的某一列进行修改
三种:table行列中只有数据,嵌入input/select/等标签,级联修改最后一列数据当前行当前列中只有数据jswindow.onload=function(){ //焦点离开事件 //也可以是click事件 $('tr').focusout(function(){ //获取当前点击的行的**子节点(列)**中的数据 //0表示第一列 var data1=$(this).
jquery遍历表格 每一行 值
例:遍历  序号和价格, 0 元素和2元素 (要引入的jquery :jquery-1.10.2.min.js) js测试 关注 1 2 3 删除 yi er san 删除 一 二 三 删除 更新 $(function(){
jquery table 横竖列的求总和
jquery table 横竖列的求总和,jquery table 横竖列的求总和,jquery table 横竖列的求总和 参考 var lastTr = []; $("#table").find("tr").each(function(j, e){ if(j == 0){ return true
Jquery、js计算table行合计
计算table的行合计比计算列合计
js写的合计(对一列,一行进行合计)
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">        增值税小规模纳税人户数情况统计  /jsp/css/css.css" type=text/css rel=stylesheet>  /jsp/js/validation.js">    /jsp/js/c
easyUI的table表格怎么实现将每一行中某几列数据相加放入另一列
首先是页面中求和的代码 ,放在function onLoadSuccess() 中 type="text/javascript">   function onLoadSuccess(data) {   var rows = $('#dg').datagrid('getRows');//获取当前的数据行,dg是表格的id
js表格求和的方法
function sum() { var tblObj = document.getElementById("PrintA"); var length = tblObj.rows.length; var total = 0;   for( var i=1; i   {      total += parseInt(tblObj.rows.item(i).cells[2].in
Linux Shell 统计一列数值的总和
Linux Shell 统计一列数值的总和 (2010-06-04 14:38:15) http://blog.sina.com.cn/s/blog_685454170100itpj.html 转载▼ 标签: linux shell 列求和 列 it 分类: Linux-Shell-Study 题目: 统计一文件中的一列的所