- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个包含两个不同列的表格,我想将它们相加以得出它们各自的总和。现在我只添加其中一列,我可以通过再次制作相同的 JS 但使用不同的值名称来添加第二列,但这不是那么漂亮。我将如何更改它以便它计算 ue 列以及 egen 并吐出两个结果,sum 和 sum2.
<table>
<tr>
<td><asp:TextBox ID="TextBox1" runat="server">Number</asp:TextBox></td>
<td class="egen"><asp:TextBox ID="TextBox56" runat="server" Columns="1">56</asp:TextBox></td>
<td class="ue"><asp:TextBox ID="TextBox57" runat="server" Columns="1">57</asp:TextBox></td>
</tr>
<tr>
<td><asp:TextBox ID="TextBox2" runat="server">Worker</asp:TextBox></td>
<td class="egen"><asp:TextBox ID="TextBox58" runat="server" Columns="1">58</asp:TextBox></td>
<td class="ue"><asp:TextBox ID="TextBox59" runat="server" Columns="1">59</asp:TextBox></td>
</tr>
<tr>
<td align="right">Sum:</td>
<td align="center"><span id="sum"></span></td>
<td align="center"><span id="sum2"></span></td
</tr>
</table>
这是我用来添加 egen 列中值的 javascript。
$(document).ready(function () {
//iterate through each td based on class / input and add keyup
//handler to trigger sum event
$(".egen :input").each(function () {
$(this).keyup(function () {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
// iterate through each td based on class and add the values from the input
$(".egen :input").each(function () {
var value = $(this).val();
// add only if the value is number
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
});
$('#sum').text(sum);
};
最佳答案
您可以通过以下选择器定位 .egen
或 .ue
中的所有元素:
$('.egen :input, .ue :input')
或者如果你愿意:
$('.egen, .ue').find(':input')
顺便说一句,您不需要遍历元素集合来将 keyup
监听器绑定(bind)到它们,您可以立即绑定(bind)到整个集合:
$('.egen :input, .ue :input').keyup(calculateSum);
编辑
我从 #sum
和 #sum2
的存在中注意到,您可能希望分别对各列求和。你可以这样做:
$('.egen :input').keyup(function() { calculateSum('.egen'); });
$('.ue :input').keyup(function() { calculateSum('.ue'); });
function calculateSum(container) {
var sum = 0;
$(container).find(':input').each(function() {
...
});
}
然后当然是分别设置#sum
或#sum2
的值。这可以通过多种方式实现。要么你传递 id,就像我们传递上面的类一样,要么你使用一个名为 sum
的类,并让相应的 td
重用 egen
和 ue
类。这样您就可以使用 $(container+'.sum').val()
访问正确的总和。另一种解决方案是只返回总和,并将其设置在您的 keyup 监听器中:
$('.ue :input').keyup(function() {
$('#sum2').val( calculateSum('.ue') );
});
另请注意,您的解析可以简化。 parseFloat
会对很多无效值产生 NaN
,包括空字符串和 null
,因此您无需在调用前仔细检查您的值它。 NaN
的计算结果为 false,因此您始终可以通过 (parsedResult || 0)
求和,因为结果将为 0
,留下总和不受影响,如果 parsedResult
是 NaN
。
因此:
var sum = 0;
$(container).find(':input').each(function() {
sum += (parseFloat( $(this).val() ) || 0);
});
关于javascript - 如何用 javascript 和 jQuery 总结几列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15758871/
我正在尝试使用描述的方法将数据表转换为字典 here , 但我得到一个错误 Cannot implicitly convert type System.Collections.Generic.Dict
我想在几个列上使用 orderBY,但它们应该像一列一样。 该表看起来像这样: col1 | col2 5 | 2 | | 3 7 | | 1 | 1
我有这张表 mytable: +----+--------------------------------------+ | id | date1 | date2 | date3
我是一名优秀的程序员,十分优秀!