提交表單后如何顯示表格-有解無憂

我有一個表格可以輸入分數并計算平均分數。輸入表格后，用戶點擊提交按鈕，它會顯示一個之前輸入的分數表以及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;
}

uj5u.com熱心網友回復：

您的源代碼存在一些問題。
1.你使用了testScore.avg，但是你沒有在變數testScore中宣告avg。
2.最好type="number"用作分數的輸入，否則需要添加pattern="yourpattern"禁止輸入字母和特殊字符。
3.innerHtml 語法不正確，innerHTML改用。
4.您只需要使用一個insertRow()。至于其他欄位，您應該使用insertCell()。
5.您需要在insertRow/insertCell 方法中插入一個數字。例如。insertRow(x);
至于計算平均值，您可以通過將三個欄位相加并除以欄位數來輕松找到它。
最好隱藏整個磁區而不是只隱藏表格，你不覺得網站上有按鈕但它什么都不做很奇怪嗎？
您還可以在表單中添加輸入欄位，以便您可以為欄位添加強制屬性，以確保不會將空值添加到表中。
您還需要添加i ;您的函式，否則表格中“No”列中的所有數字將是相同的數字。
要隱藏/顯示表格中的某個列，您可以nth-child在 css/js 中使用。
最后也是最重要的問題，檢查你的拼寫。有的用物理的，有的用物理的，有的用化學的，但有的用化學的，這很混亂，給以后的維護或除錯帶來麻煩。這樣你也可以很容易地遇到很多錯誤。例如。您宣告為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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/438956.html

標籤：javascript html dom 事件

上一篇：Laravel/React-從控制器獲取資料陣列以回應組件

下一篇：為什么在加法之后邏輯不是語法上無效的？