文章/答案/技术大牛

发布

社区首页 >问答首页 >和表行和列

问和表行和列
EN

Stack Overflow用户

提问于 2017-12-27 11:24:21

回答 5查看 13.6K关注 0票数 2

我有一个表，我希望允许提交表单当且仅当每行的总数必须=100，不小于或大于100，且每列的总数必须是<=100，而不超过100。

这是旧的场景，每一行和每列必须为= 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"/>

Demo Link

我试图改变它，但我无法成功。

javascript

html-table

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-12-27 12:55:16

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>

票数 0

Stack Overflow用户

发布于 2017-12-27 11:57:42

希望它能对你有用

$(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;
      }

      if( tmp['sum_1'] <= 100 && 
          tmp['sum_2'] <= 100 && 
          tmp['sum_5'] <= 100 && 
          tmp['sum_6'] <= 100 && 
          tmp['sum_7'] <= 100) {
          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);
    }
    var tmp = {
      sum_1:null,
      sum_2:null,
      sum_5:null,
      sum_6:null,
      sum_7:null
    };
    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>");
      }

      tmp['sum_'+className] = sumTotal;

    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></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"/>

票数 0

Stack Overflow用户

发布于 2017-12-27 12:25:11

您将通过以下方式更改旧情况：

if( tmp['sum_1'] == 100 && 
          tmp['sum_2'] == 100 && 
          tmp['sum_5'] <= 100 && 
          tmp['sum_6'] <= 100 && 
          tmp['sum_7'] <= 100) {
          enableSave();
} else {
        disableSave();
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47991320

复制

相似问题

问和表行和列
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问和表行和列EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问和表行和列
EN