如何显示 table 标题但值显示“?”
How to show a table heading but the value show "?"
我有一个用于输入分数的表单,当用户单击“提交”按钮时,它会显示一个 table,其中将包含所有输入的信息。但是,我的问题是我想将 table 标题显示为“平均分”,但“平均分”列的值应显示为“?” .让我介绍以下内容,我想用纯 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;
}
到此为止,尽情享受吧
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%;
}
我有一个用于输入分数的表单,当用户单击“提交”按钮时,它会显示一个 table,其中将包含所有输入的信息。但是,我的问题是我想将 table 标题显示为“平均分”,但“平均分”列的值应显示为“?” .让我介绍以下内容,我想用纯 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;
}
到此为止,尽情享受吧
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%;
}