当前位置： 文江博客话题详情

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

发布于 2025-01-10 23:54:06 字数 5703 浏览 0 评论 0原文

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

<!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%;
}
原文

I have a form and my problem is i want to change the value inside a column. My average column will show after the user submit their score however, it must show the "?" value it only show the calculated average score when user click the button "Show average score". I struggle with my function to show so I really need help. I am appciate and grateful. Let me demonstrate

<!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 file

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 file

#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%;
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

橪书 2025-01-17 23:54:06

如果你只是想让它工作，你可以

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

用以下代码替换这两行：

showAvg(avg);

你可以在这里看到一个工作的codepen： https://codepen.io/Cleverballs/pen/XWzyMYM

if you just want to make it work, you could replace those two lines

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

with this :

showAvg(avg);

You can see a working codepen here : https://codepen.io/Cleverballs/pen/XWzyMYM

回复 原文
~没有更多了~

关于作者

莳間冲淡了誓言ζ

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

若能看破又如何

文章 0 评论 0

夢野间

文章 0 评论 0

doggiejohn

文章 0 评论 0

就此别过

文章 0 评论 0

初见终念

文章 0 评论 0

qq_rvKjBH

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文