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

如何显示表格标题但值显示“？”

发布于 2025-01-10 10:03:01 字数 4885 浏览 0 评论 0原文

我有一个用于输入分数的表格，当用户单击“提交”按钮时，它会显示一个包含所有输入信息的表格。但是，我的问题是我想将表格标题显示为“平均分数”，但“平均分数”列的值应显示为“？” .让我介绍以下内容，我希望用纯 JS 完成这个练习，请帮忙。我真的很感激和欣赏。

这是我的 HTML 文件：

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

    <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" min="0" max="10" id="math" type="number" />
        </td>
      </tr>

      <tr>
        <td>Physics:</td>
        <td>
          <input name="physics" min="0" max="10" id="physics" type="number" />
        </td>
      </tr>

      <tr>
        <td>Chemistry:</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 the user enters the score and submits, this table will be displayed with the 2 buttons below
-->
    <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> <!--Only show table heading but the value must be show "?"-->
      </table>

      <!--User press this button and the average score will be calculated and substituted for the value "?" in the "Average Score" column.-->
      <button onclick="showAvg()" align="center">Calculate the average score</button>

      <!--This is to demonstrate the average score >= 8-->
      <button onclick="showBest()" align="center">
        Best student
      </button>
    </div>
  </body>

我的 JS 文件：

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

var i = 1;
// Show the table after "Submit"
function score_table() {
    
    document.getElementById("divTable").style.display="block";

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

    // I know to calcualte the average score but i am struggle to show the value "?"
    testScore.avg = ((parseFloat(testScore.math) + parseFloat(testScore.physical) + parseFloat(testScore.chemistry)) / 3).toFixed(2);
    
    document.getElementById("name").value = "";
    document.getElementById("math").value = "";
    document.getElementById("physics").value = "";
    document.getElementById("chemical").value = "";

    // Add the data after submit
    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);
    
// Return the HTML value
    number.innerHTML  = i;
    name.innerHTML  = testScore.name;
    math.innerHTML  = testScore.math;
    physics.innerHTML  = testScore.physical;
    chemistry.innerHTML  = testScore.chemistry;
    avg.innerHTML  = testScore.avg;
    i++;
}

// I want the calculated average score to replace the value "?" in the "Average Score" column
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";
    }
}

// If the average score >= 8  it will be red
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;
  width: 100%;
}

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

I have a form to enter scores and when user clicks "Submit" button it shows a table which will contains all entered information. However, my problem is that I want to display the table heading as "average score" but the value of the "average score" column should be displayed "?" .Let me present the following and I want this exercise done in pure JS, please help. I am really grateful and appreciative.

Here is my HTML file:

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

    <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" min="0" max="10" id="math" type="number" />
        </td>
      </tr>

      <tr>
        <td>Physics:</td>
        <td>
          <input name="physics" min="0" max="10" id="physics" type="number" />
        </td>
      </tr>

      <tr>
        <td>Chemistry:</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 the user enters the score and submits, this table will be displayed with the 2 buttons below
-->
    <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> <!--Only show table heading but the value must be show "?"-->
      </table>

      <!--User press this button and the average score will be calculated and substituted for the value "?" in the "Average Score" column.-->
      <button onclick="showAvg()" align="center">Calculate the average score</button>

      <!--This is to demonstrate the average score >= 8-->
      <button onclick="showBest()" align="center">
        Best student
      </button>
    </div>
  </body>

My JS file:

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

var i = 1;
// Show the table after "Submit"
function score_table() {
    
    document.getElementById("divTable").style.display="block";

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

    // I know to calcualte the average score but i am struggle to show the value "?"
    testScore.avg = ((parseFloat(testScore.math) + parseFloat(testScore.physical) + parseFloat(testScore.chemistry)) / 3).toFixed(2);
    
    document.getElementById("name").value = "";
    document.getElementById("math").value = "";
    document.getElementById("physics").value = "";
    document.getElementById("chemical").value = "";

    // Add the data after submit
    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);
    
// Return the HTML value
    number.innerHTML  = i;
    name.innerHTML  = testScore.name;
    math.innerHTML  = testScore.math;
    physics.innerHTML  = testScore.physical;
    chemistry.innerHTML  = testScore.chemistry;
    avg.innerHTML  = testScore.avg;
    i++;
}

// I want the calculated average score to replace the value "?" in the "Average Score" column
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";
    }
}

// If the average score >= 8  it will be red
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 {}
    }
  }

My CSS file:

#divTable {
  display: none;
  text-align: center;
  width: 100%;
}

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

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

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

发布评论

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

评论（1）

成熟稳重的好男人 2025-01-17 10:03:01

好了，享受吧

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 = "?";
    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
    i++;
}

// 
function showAvg() {
  var table = document.getElementById('tableScore');
  var count = table.rows.length;
  for(var i = 0; i < count; i++) {
  var math =  parseFloat(table.rows[i].cells[2].innerHTML);
  var physics =  parseFloat(table.rows[i].cells[3].innerHTML);
  var chemistry =  parseFloat(table.rows[i].cells[4].innerHTML);
  var avg = ((math + physics + chemistry)/3).toFixed(2);
  if (i > 0) {
    table.rows[i].cells[5].innerHTML = avg;
  }
}
}


// 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.color = "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%;
}

There ya go, enjoy it

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 = "?";
    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
    i++;
}

// 
function showAvg() {
  var table = document.getElementById('tableScore');
  var count = table.rows.length;
  for(var i = 0; i < count; i++) {
  var math =  parseFloat(table.rows[i].cells[2].innerHTML);
  var physics =  parseFloat(table.rows[i].cells[3].innerHTML);
  var chemistry =  parseFloat(table.rows[i].cells[4].innerHTML);
  var avg = ((math + physics + chemistry)/3).toFixed(2);
  if (i > 0) {
    table.rows[i].cells[5].innerHTML = avg;
  }
}
}


// 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.color = "red";
      } else {}
    }
  }

Oh, there more you need to change 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%;
}
回复 原文
~没有更多了~

关于作者

寄居者

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 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 和您的相关数据。
    原文