汇总表的行和列 [英] Sum table rows and columns
本文介绍了汇总表的行和列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一张桌子，并且我希望在以下情况下提交表单:且仅当每行的总和必须等于100或更少或更多时 并且每列的总和必须为< = 100且不超过100
I have a table and I want to allow submitting the form if and only if the total of each row must be =100 not less nor more and the total of each column must be <=100 and not more than 100
这是旧的情况，每行每列必须= 100.
This is the old scenario each row and each column must be = 100.
演示代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
disableSave();
$(".sum").on("input", function() {
sumThisClass("1");
sumThisClass("2");
sumThisClass("3");
sumThisClass("4");
sumThisClass("5");
sumThisClass("6");
sumThisClass("7");
validateForm();
});
function validateForm() {
var hasError = $(".error").length > 0;
if (hasError) {
disableSave();
return;
}
var expectedTotal = $(".total").length * 100;
console.log(expectedTotal, getCurrentTotal());
if (expectedTotal == getCurrentTotal()) {
enableSave();
}
else {
disableSave();
}
}
function getCurrentTotal() {
var sumTotal = 0;
$(".total").each(function (index, el) {
var elValue = parseInt($(el).text());
if (!isNaN(elValue)) {
sumTotal += parseInt($(el).text());
}
});
return sumTotal;
}
function disableSave() {
$("#btn-save").prop("disabled", true);
}
function enableSave() {
$("#btn-save").prop("disabled", false);
}
function sumThisClass(className) {
var sumTotal = 0;
$("." + className).each(function(index, el) {
var elValue = parseInt($(el).val());
if (!isNaN(elValue)) {
sumTotal += parseInt($(el).val());
}
});
$(".sum-" + className).text(sumTotal);
if (sumTotal > 100) {
$(".sum-" + className).append("<div class='error'>cannot be greater than 100</div>");
}
}
});
</script>
<form action="test.php" method="post">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td>
<input type="number" class="sum 1 5" min="0" max="100">
</td>
<td>
<input type="number" class="sum 1 6" min="0" max="100">
</td>
<td>
<input type="number" class="sum 1 7" min="0" max="100">
</td>
<td class="total sum-1"></td>
</tr>
<tr>
<td></td>
<td>
<input type="number" class="sum 2 5" min="0" max="100">
</td>
<td>
<input type="number" class="sum 2 6" min="0" max="100">
</td>
<td>
<input type="number" class="sum 2 7" min="0" max="100">
</td>
<td class="total sum-2"></td>
</tr>
<tr>
<td>TOTAL</td>
<td class="total sum-5"></td>
<td class="total sum-6"></td>
<td class="total sum-7"></td>
</tr>
</table>
<input type="submit" name="save" value="SAVE" id="btn-save"/>
我试图进行更改，但无法成功.
I tried to change it but I couldn't succeed.
推荐答案
var isvalid=true;
$( document ).ready(function() {
$("#test").prop("disabled",true);
$(".tabbody input[type=number]").blur(function(){
validateSubmit();
});
});
function validateSubmit()
{
var retval = sumRowVals();
$("#test").prop("disabled",!retval);
$("#msgdiv").html(retval ? "":"Invalid inputs!!!");
}
function sumRowVals()
{
isvalid=true;
resetFigs();
var rindx=1;
$(".tabbody tr").each(function(){
var temp=0;
var cindx=1;
$("input[type=number]",this).each(function(){
var elval = !isNaN($(this).val()) ? parseInt($(this).val()):0;
var sumcol = $("#ccol"+cindx);
$(sumcol).html(parseInt($(sumcol).html())+elval);
temp=temp+elval;
cindx++;
if(elval > 100){isvalid=false;}
if(parseInt($(sumcol).html()) > 100){isvalid=false;}
});
if(rindx != $('.tabbody tr').length)
{
if(temp != 100){isvalid=false;}
$("#rcol"+rindx).html(temp);
}
rindx++;
});
return isvalid;
}
function resetFigs()
{
$('*[id*=ccol]').each(function() {
$(this).html("0");
});
}
function SubmitForm()
{
// your form submit code
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery2.0.2.min.js"></script>
</head>
<body>
<table border=1 cellpadding="5">
<tbody class='tabbody'>
<tr>
<td><input type="number" id="col1" min="0" max="100"></td>
<td><input type="number" id="col2" min="0" max="100"></td>
<td><input type="number" id="col3" min="0" max="100"></td>
<td id="rcol1"></td>
</tr>
<tr>
<td><input type="number" id="col1" min="0" max="100"></td>
<td><input type="number" id="col2" min="0" max="100"></td>
<td><input type="number" id="col3" min="0" max="100"></td>
<td id="rcol2"></td>
</tr>
<tr>
<td id="ccol1"></td>
<td id="ccol2"></td>
<td id="ccol3"></td>
<td>
<input type="button" name="test" id="test" value="Save" onclick="SubmitForm()" />
</td>
</tr>
</tbody>
</table>
<div id="msgdiv" style="color:red;line-height:30px"></div>
</body>
</html>
这是一个粗略的主意:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery2.0.2.min.js"></script>
<script>
var isvalid=true;
$( document ).ready(function() {
$("#test").prop("disabled",true);
$(".tabbody input[type=number]").blur(function(){
validateSubmit();
});
});
function validateSubmit()
{
var retval = sumRowVals();
$("#test").prop("disabled",!retval);
$("#msgdiv").html(retval ? "":"Invalid inputs!!!");
}
function sumRowVals()
{
isvalid=true;
resetFigs();
var rindx=1;
$(".tabbody tr").each(function(){
var temp=0;
var cindx=1;
$("input[type=number]",this).each(function(){
var elval = !isNaN($(this).val()) ? parseInt($(this).val()):0;
var sumcol = $("#ccol"+cindx);
$(sumcol).html(parseInt($(sumcol).html())+elval);
temp=temp+elval;
cindx++;
if(elval > 100){isvalid=false;}
if(parseInt($(sumcol).html()) > 100){isvalid=false;}
});
if(rindx != $('.tabbody tr').length)
{
if(temp != 100){isvalid=false;}
$("#rcol"+rindx).html(temp);
}
rindx++;
});
return isvalid;
}
function resetFigs()
{
$('*[id*=ccol]').each(function() {
$(this).html("0");
});
}
function SubmitForm()
{
// your form submit code
}
</script>
</head>
<body>
<table border=1 cellpadding="5">
<tbody class='tabbody'>
<tr>
<td><input type="number" id="col1" min="0" max="100"></td>
<td><input type="number" id="col2" min="0" max="100"></td>
<td><input type="number" id="col3" min="0" max="100"></td>
<td id="rcol1"></td>
</tr>
<tr>
<td><input type="number" id="col1" min="0" max="100"></td>
<td><input type="number" id="col2" min="0" max="100"></td>
<td><input type="number" id="col3" min="0" max="100"></td>
<td id="rcol2"></td>
</tr>
<tr>
<td id="ccol1"></td>
<td id="ccol2"></td>
<td id="ccol3"></td>
<td>
<input type="button" name="test" id="test" value="Save" onclick="SubmitForm()" />
</td>
</tr>
</tbody>
</table>
<div id="msgdiv" style="color:red;line-height:30px"></div>
</body>
</html>
这篇关于汇总表的行和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
