我有一個表格，我的問題是我想更改列內的值。我的平均列將在用戶提交他們的分數后顯示，但是，它必須顯示“？” 值它僅在用戶單擊“顯示平均分數”按鈕時顯示計算的平均分數。我很難展示我的功能，所以我真的需要幫助。我很感激和感激。讓我演示一下
<!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 ly:</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 ly 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 ly
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 ly
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%;
}
uj5u.com熱心網友回復：
如果你只是想讓它作業，你可以替換這兩行
//avg.innerHTML = testScore.avg;// Tr? v? giá tr? ?i?m trung bình
avg.innerHTML = "?";
有了這個 ：
showAvg(avg);
你可以在這里看到一個作業的codepen：https ://codepen.io/Cleverballs/pen/XWzyMYM
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/438952.html
標籤：javascript html css dom 事件