我有一个表格，当且仅当每行的总和必须等于 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"/>
演示链接 https://jsfiddle.net/1c4jhyL0/
我试图改变它，但没有成功。
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>