Question

@enhzflep和@Rob Schmuecker早些时候已经解决了这个问题：感谢您的所有努力。我能够得到每一行的总和。但我不能得到每列的总和（在页脚）。现在我想避免使用事件监听器。我究竟做错了什么？请注意，我是初学者和我的知识仅限于HTML，CSS，javascript。我正在逐渐进步。

<!DOCTYPE html>
<html>
<head>
<title>Chem help</title>

<style type="text/css">
body {font-family: Arial, Verdana, Helvetica,Sans-serif; padding: 1px;}
th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
border-style: solid; margin: 0px; border-colapse: colapse;}
td {font-weight: normal; text-align: left; font-size: 14px; border: 1px; 
border-style: solid; margin: 0px; border-colapse: colapse;}
#sn {text-align: right;}
.fin {text-align: right;}
.fin:focus {background-color: rgb(255,255,150);}
.negRed {text-align: right; background-color: rgb(250,200,200);}
.posNorm {text-align: right; background-color: rgb(255,255,255)}
.nofoc {font-weight: bold; text-align: right;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

</head>
<body>
<table id="pr">
<tbody>
<tr id="thd">
<th>s/n</th>
<th>Ddn1</th>
<th>Ddn2</th>
<th>Ddn3</th>
<th>Ddn4</th>
<th>Total</th>
</tr>

<tr>
<td id="sn" />1</td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="nofoc" readonly /></td>
</tr>

<tr>
<td id="sn" />2</td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="nofoc" readonly /></td>
</tr>

<tr>
<td id="sn" />3</td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="fin" onkeyup="update((this));" /></td>
<td><input type="text" class="nofoc" readonly /></td>
</tr>

<tfoot id="tft">
<tr>
<td class="nofoc">Total</td>
<td><input type="text" class="nofoc" readonly /></td>
<td><input type="text" class="nofoc" readonly /></td>
<td><input type="text" class="nofoc" readonly /></td>
<td><input type="text" class="nofoc" readonly /></td>
<td><input type="text" class="nofoc" readonly /></td>
</tr>
</tfoot>
</tbody>
</table>

<script>
function update(element) {
var a = element.parentElement.parentElement.children[1].children[0].value;
var c = element.parentElement.parentElement.children[2].children[0].value;
var e = element.parentElement.parentElement.children[3].children[0].value;
var g = element.parentElement.parentElement.children[4].children[0].value;
console.log(a, c, e, g);

<!-- Set all NaN value to 0 -->
if (a === "" || isNaN(a)) {
    a = 0;
}
if (c === "" || isNaN(c)) {
    c = 0;
}
if (e === "" || isNaN(e)) {
    e = 0;
}
if (g === "" || isNaN(g)) {
    g = 0;
}

    var b = parseInt(a);
    var d = parseInt(c);
    var f = parseInt(e);
    var h = parseInt(g);

    <!-- Alert for -ve input, alphabets... cell turns red -->
    if (b < 0) {
    element.parentElement.parentElement.children[1].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[1].children[0].setAttribute("class", "posNorm");
    }
    if (d < 0) {
    element.parentElement.parentElement.children[2].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[2].children[0].setAttribute("class", "posNorm");
    }
    if (f < 0) {
    element.parentElement.parentElement.children[3].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[3].children[0].setAttribute("class", "posNorm");
    }
    if (h < 0) {
    element.parentElement.parentElement.children[4].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[4].children[0].setAttribute("class", "posNorm");
    }

    var y = (b + d + f + h);    <!-- Sum deductions -->

    <!-- Alert for NaN value.. cell turns red -->
    if (isNaN(y)) {
        y = 0;
    }

    <!-- Alert for -ve input. Total = 0 & cell turns red -->
    if (b < 0 || d < 0 || f < 0 || h < 0) {
    y = 0;
    element.parentElement.parentElement.children[5].children[0].setAttribute("class", "negRed");
    } else {element.parentElement.parentElement.children[5].children[0].setAttribute("class", "posNorm");
    }

    element.parentElement.parentElement.children[5].children[0].value = y;

    var table = document.getElementById("pr"); 
    var nuRow = document.getElementById("pr").rows.length;
    var t = nuRow - 1;
    var colSum1, colSum2, colSum3, colSum4, colSum5;
    var v;
    var row;

        for(v = 1; v < t; v++){
            row = table.rows[t];
          colSum1 = colSum1 + b;
          colSum2 = colSum2 + d;
          colSum3 = colSum3 + f;
          colSum4 = colSum4 + h;
          colSum5 = colSum5 + y;

element.row.children[1].children[0].value = colSum1;
element.row.children[2].children[0].value = colSum2;
element.row.children[3].children[0].value = colSum3;
element.row.children[4].children[0].value = colSum4;
element.row.children[5].children[0].value = colSum5;
    }
}
</script>
</body>
</html>

Answer 1

您的代码中存在很多问题。

过早关闭<td />！
重用相同的id，这是最糟糕的！
将<tfoot>放入<tbody>！
最重要的是，你的代码根本不可读！

非工作最终HTML

以下代码无效，但至少没有错误！

<!DOCTYPE html>
<html>
  <head>
    <title>Chem help</title>
    <style type="text/css">
      body {font-family: Arial, Verdana, Helvetica,Sans-serif; padding: 1px;}
      th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
        border-style: solid; margin: 0px; border-colapse: colapse;}
      td {font-weight: normal; text-align: left; font-size: 14px; border: 1px; 
        border-style: solid; margin: 0px; border-colapse: colapse;}
      #sn {text-align: right;}
      .fin {text-align: right;}
      .fin:focus {background-color: rgb(255,255,150);}
      .negRed {text-align: right; background-color: rgb(250,200,200);}
      .posNorm {text-align: right; background-color: rgb(255,255,255)}
      .nofoc {font-weight: bold; text-align: right;}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

  </head>
  <body>
    <table id="pr">
      <tbody>
        <tr id="thd">
          <th>s/n</th>
          <th>Ddn1</th>
          <th>Ddn2</th>
          <th>Ddn3</th>
          <th>Ddn4</th>
          <th>Total</th>
        </tr>

        <tr>
          <td>1</td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>

        <tr>
          <td>2</td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>

        <tr>
          <td>3</td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="fin" onkeyup="update((this));" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>
      </tbody>

      <tfoot id="tft">
        <tr>
          <td class="nofoc">Total</td>
          <td><input type="text" class="nofoc" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>
      </tfoot>
    </table>

    <script>
      function update(element) {
        var a = element.parentElement.parentElement.children[1].children[0].value;
        var c = element.parentElement.parentElement.children[2].children[0].value;
        var e = element.parentElement.parentElement.children[3].children[0].value;
        var g = element.parentElement.parentElement.children[4].children[0].value;
        console.log(a, c, e, g);

        <!-- Set all NaN value to 0 -->
          if (a === "" || isNaN(a)) {
            a = 0;
          }
        if (c === "" || isNaN(c)) {
          c = 0;
        }
        if (e === "" || isNaN(e)) {
          e = 0;
        }
        if (g === "" || isNaN(g)) {
          g = 0;
        }

        var b = parseInt(a);
        var d = parseInt(c);
        var f = parseInt(e);
        var h = parseInt(g);

        <!-- Alert for -ve input, alphabets... cell turns red -->
          if (b < 0) {
            element.parentElement.parentElement.children[1].children[0].setAttribute("class", "negRed");
          } else {element.parentElement.parentElement.children[1].children[0].setAttribute("class", "posNorm");
                 }
        if (d < 0) {
          element.parentElement.parentElement.children[2].children[0].setAttribute("class", "negRed");
        } else {element.parentElement.parentElement.children[2].children[0].setAttribute("class", "posNorm");
               }
        if (f < 0) {
          element.parentElement.parentElement.children[3].children[0].setAttribute("class", "negRed");
        } else {element.parentElement.parentElement.children[3].children[0].setAttribute("class", "posNorm");
               }
        if (h < 0) {
          element.parentElement.parentElement.children[4].children[0].setAttribute("class", "negRed");
        } else {element.parentElement.parentElement.children[4].children[0].setAttribute("class", "posNorm");
               }

        var y = (b + d + f + h);    <!-- Sum deductions -->

          <!-- Alert for NaN value.. cell turns red -->
            if (isNaN(y)) {
              y = 0;
            }

        <!-- Alert for -ve input. Total = 0 & cell turns red -->
          if (b < 0 || d < 0 || f < 0 || h < 0) {
            y = 0;
            element.parentElement.parentElement.children[5].children[0].setAttribute("class", "negRed");
          } else {element.parentElement.parentElement.children[5].children[0].setAttribute("class", "posNorm");
                 }

        element.parentElement.parentElement.children[5].children[0].value = y;

        var table = document.getElementById("pr"); 
        var nuRow = document.getElementById("pr").rows.length;
        var t = nuRow - 1;
        var colSum1, colSum2, colSum3, colSum4, colSum5;
        var v;
        var row;

        for(v = 1; v < t; v++){
          row = table.rows[t];
          colSum1 = colSum1 + b;
          colSum2 = colSum2 + d;
          colSum3 = colSum3 + f;
          colSum4 = colSum4 + h;
          colSum5 = colSum5 + y;

          element.row.children[1].children[0].value = colSum1;
          element.row.children[2].children[0].value = colSum2;
          element.row.children[3].children[0].value = colSum3;
          element.row.children[4].children[0].value = colSum4;
          element.row.children[5].children[0].value = colSum5;
        }
      }
    </script>
  </body>
</html>

而不是上面所有这些，你可以简单地使用jQuery来完成你的工作。您的列和行列表已经修复了！刚刚发现你甚至无缘无故地包含了jQuery！

最终输出：

<!DOCTYPE html>
<html>
  <head>
    <title>Chem help</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

    <style type="text/css">
      * {font-family: Segoe UI;}
      th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
        border-style: solid; margin: 0px; border-colapse: colapse;}
      td {font-weight: normal; text-align: left; font-size: 14px; border: 1px; 
        border-style: solid; margin: 0px; border-colapse: colapse;}
      #sn {text-align: right;}
      .fin {text-align: right;}
      .fin:focus {background-color: rgb(255,255,150);}
      .negRed {text-align: right; background-color: rgb(250,200,200);}
      .posNorm {text-align: right; background-color: rgb(255,255,255)}
      .nofoc {font-weight: bold; text-align: right;}
    </style>

  </head>
  <body>
    <table id="pr">
      <tbody>
        <tr id="thd">
          <th>s/n</th>
          <th>Ddn1</th>
          <th>Ddn2</th>
          <th>Ddn3</th>
          <th>Ddn4</th>
          <th>Total</th>
        </tr>

        <tr>
          <th>1</th>
          <td><input type="text" class="fin1" /></td>
          <td><input type="text" class="fin2" /></td>
          <td><input type="text" class="fin3" /></td>
          <td><input type="text" class="fin4" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>

        <tr>
          <th>2</th>
          <td><input type="text" class="fin1" /></td>
          <td><input type="text" class="fin2" /></td>
          <td><input type="text" class="fin3" /></td>
          <td><input type="text" class="fin4" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>

        <tr>
          <th>3</th>
          <td><input type="text" class="fin1" /></td>
          <td><input type="text" class="fin2" /></td>
          <td><input type="text" class="fin3" /></td>
          <td><input type="text" class="fin4" /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>
      </tbody>
      <tfoot id="tft">
        <tr>
          <th>Total</th>
          <td><input type="text" class="nofoc fin1" readonly /></td>
          <td><input type="text" class="nofoc fin2" readonly /></td>
          <td><input type="text" class="nofoc fin3" readonly /></td>
          <td><input type="text" class="nofoc fin4" readonly /></td>
          <td><input type="text" class="nofoc" readonly /></td>
        </tr>
      </tfoot>
    </table>

    <script>
      $(function () {
        $("input").keyup(function () {
          col = [0, 0, 0, 0, 0];
          $(".fin1").each(function () {
            console.log(($(this).val()));
            if (!isNaN($(this).val()) && $(this).val() != "")
              col[0] += parseInt($(this).val());
          });
          $(".fin2").each(function () {
            if (!isNaN($(this).val()) && $(this).val() != "")
              col[1] += parseInt($(this).val());
          });
          $(".fin3").each(function () {
            if (!isNaN($(this).val()) && $(this).val() != "")
              col[2] += parseInt($(this).val());
          });
          $(".fin4").each(function () {
            if (!isNaN($(this).val()) && $(this).val() != "")
              col[3] += parseInt($(this).val());
          });
          col[4] = parseInt(col[0]) + parseInt(col[1]) + parseInt(col[2]) + parseInt(col[3]);
          i = 0;
          $("tfoot tr input").each(function () {
            $(this).val(col[i++]);
          });
          $("tr").each(function () {
            $(this).find(".nofoc").val(
              ((!isNaN($(this).find(".fin1").val())) ? parseInt($(this).find(".fin1").val()) : 0) +
              ((!isNaN($(this).find(".fin2").val())) ? parseInt($(this).find(".fin2").val()) : 0) +
              ((!isNaN($(this).find(".fin3").val())) ? parseInt($(this).find(".fin3").val()) : 0) +
              ((!isNaN($(this).find(".fin4").val())) ? parseInt($(this).find(".fin4").val()) : 0)
            );
          });
        });
      });
    </script>

  </body>
</html>

自动更新行总和＆amp;表中的列

1 个答案: