如何在提交表单后显示 table

Question

我有一个表格可以输入分数并计算平均分。输入表单后，用户单击提交按钮，它将显示 table 之前输入的分数以及 2 个按钮。第一个按钮将在表格中添加一列平均分数，第二个按钮将确定是否有任何平均分数 >= 8 该列中的字母将以红色突出显示。

这是我的代码。

这是我的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <script src="js/script.js"></script>
    <h1 align="center">Class Marksheet</h1>

<!--
This is a form for users to enter scores
-->
    <table align="center">
      <tr>
        <td>Name:</td>
        <td><input name="name" id="name" type="text" /></td>
      </tr>

      <tr>
        <td>Math:</td>
        <td><input name="math" id="math" type="text" /></td>
      </tr>

      <tr>
        <td>Physics:</td>
        <td><input name="physics" id="physics" type="text" /></td>
      </tr>

      <tr>
        <td>Chemistry:</td>
        <td><input name="chemical" id="chemical" type="text" /></td>
      </tr>

      <td>
        <button type="submit" onclick="score_table()">Submit</button>
      </td>
    </table>

<!--
This table below must not show when user access the browser, 
it only show after user enter score and click the "Submit" button with 2 button below
-->
    <table id="tableScore" border="2" width="100%">
      <th>No</th>
      <th>Name</th>
      <th>Math</th>
      <th>Physics</th>
      <th>Chemistry</th>
      <th>Average Score</th> <!-- This still can not show -->
    </table>

   <div>
  <button onclick="">Show the average score</button> <!--This will show the average score column-->
  <button onclick="">Best student</button> <!--Determine if any average score >= 8 hightlight all the text into red-->
    </div>
  </body>
</html>

我的 JS 文件：

var testScore = { 
    name: "",
    math: 0,
    physical: 0,
    chemistry: 0
};
var i = 0; /* This variable is incremented by 1 every time the user clicks the "Submit" button. Display the "No" column, and the position of rows when added to the table 
*/

// Show a table after submit
function score_table() {
    document.getElementById("tableScore").style.display="block";

    // Gathering the data after submit
    testScore.name = document.getElementById("name").value;
    testScore.math = document.getElementById("math").value;
    testScore.physical = document.getElementById("physics").value;
    testScore.chemistry = document.getElementById("chemical").value;
    testScore.avg = "?";
    document.getElementById("name").value = "";
    document.getElementById("math").value = "";
    document.getElementById("physics").value = "";
    document.getElementById("chemical").value = "";

// Insert row
    var table = document.getElementById("tableScore");
    var row = table.insertRow();
    var number = row.insertRow();
    var name = row.insertRow();
    var math = row.insertRow();
    var physics = row.insertRow();
    var chemistry = row.insertRow();
    var avg = row.insertRow();
    
    number.innerHtml = i;
    name.innerHtml = testScore.name;
    math.innerHtml = testScore.math;
    physics.innerHtml = testScore.physics;
    chemistry.innerHtml = testScore.chemistry;
    avg.innerHtml = "?";

/** I need help, How to calculate the average score and if the average 
score is >= 8 then hightlight every text in that row into red
 */
}

最后，我的 CSS 文件：

/* I just do to hidden the table, because i struggle with JS file :)) */
#tableScore {
  display: none;
}

Answer 1

您的源代码存在一些问题。
1。你使用了 testScore.avg，但你没有在变量 testScore 中声明 avg。
2.it 最好使用 type="number" 作为分数的输入，或者你需要添加pattern="yourpattern" 禁止输入字母和特殊字符。
3.innerHtml 不是正确的语法，请改用 innerHTML。
4.You 只需要使用一个insertRow()。至于其他字段，您应该使用insertCell()代替。
5.You需要在insertRow/insertCell方法中插入一个数字。例如insertRow(x);
至于计算平均值，你可以通过将三个字段相加并除以字段数来轻松找到它。
最好隐藏整个除法而不是只隐藏table，不要你觉得网站上有按钮但它什么都不做很奇怪吗？
你也可以在表单中添加输入字段，这样你就可以为字段添加强制属性以确保不会出现空值被添加到 table。
你还需要在你的函数中加上i++;，否则你的table的“否”一栏的所有数字都是同一个数字。
到hide/show在table中的某列，可以在css/js中使用nth-child。
最后也是最重要的问题，检查你的拼写。有的你用physics，有的用physical，有的用chemistry，有的用chemical，这样很混乱，给以后维护或者调试带来困难。这样你也很容易遇到很多错误。例如。您声明为 testScore.physical，但在您使用的函数中 testScore.physics
选择一个变量名称并坚持使用它。

var testScore = {
  name: "",
  math: 0,
  physics: 0,
  chemistry: 0,
  avg: 0
};
var i = 1;
/* This variable is incremented by 1 every time the user clicks the "Submit" button. Display the "No" column, and the position of rows when added to the table 
 */

// Show a table after submit
function score_table() {
  document.getElementById("divTable").style.display = "block";

  // Gathering the data after submit
  testScore.name = document.getElementById("name").value;
  testScore.math = document.getElementById("math").value;
  testScore.physics = document.getElementById("physics").value;
  testScore.chemistry = document.getElementById("chemical").value;
  testScore.avg = (parseFloat(testScore.math) + parseFloat(testScore.physics) + parseFloat(testScore.chemistry)) / 3;
  document.getElementById("name").value = "";
  document.getElementById("math").value = "";
  document.getElementById("physics").value = "";
  document.getElementById("chemical").value = "";

  // Insert row
  var table = document.getElementById("tableScore");
  var row = table.insertRow(i);
  var number = row.insertCell(0);
  var name = row.insertCell(1);
  var math = row.insertCell(2);
  var physics = row.insertCell(3);
  var chemistry = row.insertCell(4);
  var avg = row.insertCell(5);

  number.innerHTML = i;
  name.innerHTML = testScore.name;
  math.innerHTML = testScore.math;
  physics.innerHTML = testScore.physics;
  chemistry.innerHTML = testScore.chemistry;
  avg.innerHTML = testScore.avg;
  i++;
  /** I need help, How to calculate the average score and if the average 
  score is >= 8 then hightlight every text in that row into red
   */
}

function showAvg() {
  document.getElementById("tableScore").querySelector("th:nth-child(6)").style.display = "block";

  var colAvg = document.getElementById("tableScore").querySelectorAll("td:nth-child(6n)");
  for (var i = 0; i < colAvg.length; i++) {
    colAvg[i].style.display = "block";
  }
}

function showBest() {
  var colAvg = document.getElementById("tableScore").querySelectorAll("td:nth-child(6n)");
  var rowAvg = document.getElementById("tableScore").querySelectorAll("tr:nth-child(1n)");

  for (var i = 0; i < colAvg.length; i++) {
    var avg = parseFloat(colAvg[i].innerText);
    if (avg >= 8) {
      rowAvg[i + 1].style.background = "red";
    } else {}
  }
}

/* I just do to hidden the table, because i struggle with JS file :)) */

#divTable {
  display: none;
  width: 100%;
}

#tableScore th:nth-child(6),
#tableScore td:nth-child(6) {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>
  <script src="js/script.js"></script>
  <h1 align="center">Class Marksheet</h1>

  <!--
    This is a form for users to enter scores
    -->
  <table align="center">
    <tr>
      <td>Name:</td>
      <td><input name="name" id="name" type="text" /></td>
    </tr>

    <tr>
      <td>Math:</td>
      <td><input name="math" id="math" type="number" /></td>
    </tr>

    <tr>
      <td>Physics:</td>
      <td><input name="physics" id="physics" type="number" /></td>
    </tr>

    <tr>
      <td>Chemistry:</td>
      <td><input name="chemical" id="chemical" type="number" /></td>
    </tr>

    <td>
      <button type="submit" onclick="score_table()">Submit</button>
    </td>
  </table>

  <!--
    This table below must not show when user access the browser, 
    it only show after user enter score and click the "Submit" button with 2 button below
    -->
  <div id="divTable">
    <table id="tableScore" border="2">
      <th>No</th>
      <th>Name</th>
      <th>Math</th>
      <th>Physics</th>
      <th>Chemistry</th>
      <th>Average Score</th>
      <!-- This still can not show -->
    </table>

  
    <button onclick="showAvg()">Show the average score</button>
    <!--This will show the average score column-->
    <button onclick="showBest()">Best student</button>
    <!--Determine if any average score >= 8 hightlight all the text into red-->
  </div>
</body>

</html>

如何在提交表单后显示 table

How to show a table after submit a form

html

javascript

events

dom