单击按钮时如何更改 table 内的值？

Question

我有一个表单，我的问题是我想更改列中的值。我的平均分栏将在用户提交分数后显示，但它必须显示“？” value 它仅在用户单击“显示平均分数”按钮时显示计算的平均分数。我很难展示我的功能，所以我真的需要帮助。我很感激也很感激。让我演示一下

<!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>Project 2 JS - Nguyễn Quốc An</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <script src="js/script.js"></script>
    <h1 align="center">Class Marksheet</h1>

    <!--Form to input score-->
    <table align="center">
      <tr>
        <td>Họ tên:</td>
        <td><input name="name" id="name" type="text" /></td>
      </tr>

      <tr>
        <td>Điểm toán:</td>
        <td>
          <input name="math" min="0" max="10" id="math" type="number" />
        </td>
      </tr>

      <tr>
        <td>Điểm lý:</td>
        <td>
          <input name="physics" min="0" max="10" id="physics" type="number" />
        </td>
      </tr>

      <tr>
        <td>Điểm hóa:</td>
        <td>
          <input name="chemical" min="0" max="10" id="chemical" type="number" />
        </td>
      </tr>

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

    <!--After click submit show this table-->
    <div id="divTable">
      <table id="tableScore" border="5" align="center">
        <th>No</th>
        <th>Name</th>
        <th>Math</th>
        <th>Physics</th>
        <th>Chemistry</th>
        <th>Average score</th><!--This has the "?" value-->
      </table>

      <!--Click this button to change the value inside average score column-->
      <button onclick="showAvg()" align="center">Show average score</button>

      <!--Tô đậm các học sinh có điểm tb >= 8-->
      <button onclick="showBest()" align="center">
        Xác định học sinh giỏi
      </button>
    </div>
  </body>
</html>

JS文件

var testScore = { 
    name: "",
    math: 0,
    physical: 0,
    chemistry: 0,
    avg: 0
};

var i = 1;
// Hiển thị ra bảng điểm sau khi nhập
function score_table() {
    
    document.getElementById("divTable").style.display="block";

    // Lấy dữ liệu sau khi nhập
    testScore.name = document.getElementById("name").value;// gán giá trị tên theo id ở input
    testScore.math = document.getElementById("math").value;// gán giá trị toán theo id ở input
    testScore.physical = document.getElementById("physics").value;// gán giá trị vật lý theo id ở input
    testScore.chemistry = document.getElementById("chemical").value;// gán giá trị hóa học theo id ở input
    testScore.avg = "?"
    // Tính điểm trung bình và gán vào biến đã khai báo ở đầu
    //testScore.avg = ((parseFloat(testScore.math) + parseFloat(testScore.physical) + parseFloat(testScore.chemistry)) / 3).toFixed(2);
    
    document.getElementById("name").value = "";// Xóa trắng các ô input của tên
    document.getElementById("math").value = "";// Xóa trắng các ô input của toán
    document.getElementById("physics").value = "";// Xóa trắng các ô input của vật lý
    document.getElementById("chemical").value = "";// Xóa trắng các ô input của hóa học

    // Thêm dữ liệu vào bảng sau khi nhập thông tin
    var table = document.getElementById("tableScore");
    var row = table.insertRow(i);// Tạo table row theo vị trí
    var number = row.insertCell(0);// Table data ở vị trí đầu tiên
    var name = row.insertCell(1);// Vị trí thứ 2
    var math = row.insertCell(2);// Vị trí thứ 3
    var physics = row.insertCell(3);// Vị trí thứ 4
    var chemistry = row.insertCell(4);// Vị trí thứ 5
    var avg = row.insertCell(5);// Vị trí thứ 6
    
    number.innerHTML  = i;// Trả về nội dung HTML
    name.innerHTML  = testScore.name;// Tên sẽ trả về các giá trị đã được nhập
    math.innerHTML  = testScore.math;// Trả về giá trị HTML của toán
    physics.innerHTML  = testScore.physical;// Trả về giá trị HTML của điểm lý
    chemistry.innerHTML  = testScore.chemistry;// Trả về giá trị HTML của điểm hóa
    //avg.innerHTML  = testScore.avg;// Trả về giá trị điểm trung bình
    avg.innerHTML = "?";
    i++;
}

// I need help here how to change the "?" value in the average score column
function showAvg(avg) {
    var colAvg = ((parseFloat(testScore.math) + parseFloat(testScore.physical) + parseFloat(testScore.chemistry)) / 3).toFixed(2);
    for (var i = 0; i < colAvg.length; i++) {
      avg.innerHTML = colAvg;
    }
}

// Xác định nếu điểm >= 8 thì bôi đỏ cột và hàng đó
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 {}
    }
  }

CSS 文件

#divTable {
  display: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#tableScore th:nth-child(6),
#tableScore td:nth-child(6) {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

Answer 1

如果你只是想让它工作，你可以替换这两行

//avg.innerHTML  = testScore.avg;// Trả về giá trị điểm trung bình
avg.innerHTML = "?";

用这个：

showAvg(avg);

您可以在此处查看可用的代码笔：https://codepen.io/Cleverballs/pen/XWzyMYM

单击按钮时如何更改 table 内的值？

How to change the value inside a table when click a button?

html

javascript

css

events

dom