我有一個表格可以輸入分數并計算平均分數。輸入表單后，用戶點擊提交按鈕，會顯示之前輸入過的分數表和2個按鈕，但平均分數列必須顯示值“？”。然后，當用戶點擊“計算平均分”按鈕時，將計算平均分并替換“？” 值，“最佳學生”按鈕將確定任何平均分數是否 >= 8，該列中的字母將以紅色突出顯示。我的問題是如何確定任何平均分數是否> = 8，該列中的文本將以紅色突出顯示。
HTML 代碼：
<!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 3 - Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/main.css" />
<script src="js/app.js"></script>
</head>
<body>
<body>
<h1 align="center" class="col- col-s-12 col-12">Class Marksheet</h1>
<!--Form for users to enter scores-->
<table align="center" class="col- col-s-3 col-3">
<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" id="show_table">Submit</button>
</td>
</table>
<!--After the user enters the score and click the submits button this table will be displayed with the 2 buttons below-->
<div id="divTable">
<table
id="tableScore"
class="col- col-s-12 col-12"
border="5"
align="center"
>
<th>No</th>
<th>Name</th>
<th>Math</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Average Score</th> <!--This column will display the value "?"-->
</table>
<!--Click this button to calculate the average score and replace the value "?"-->
<button id="showAvg" align="center">
Calculate the average score
</button>
<!--Determine if any average score is >= 8 the letter in that column will be highlighted in red-->
<button id="showBest" align="center">
Best student
</button>
</div>
</body>
</html>
</body>
</html>
JS 檔案：
var testScore = {
name: "",
math: 0,
physical: 0,
chemistry: 0,
avg: 0
};
var i = 1;
// This will display the table and the average score has "?" value
$(function() {
$('#show_table').click(function() {
$('#divTable').css("display","block");
var name = $("#name").val();
var math = $("#math").val();
var physics = $("#physics").val();
var chemical = $("#chemical").val();
$('#divTable').css("display","block");
$("#name").val("");
$("#math").val("");
$("#physics").val("");
$("#chemical").val("");
var html = "<tr>";
html = "<td>" i "</td>";
html = "<td>" name "</td>";
html = "<td>" math "</td>";
html = "<td>" physics "</td>";
html = "<td>" chemical "</td>";
html = "<td>?</td>";
$('#divTable table').append(html);
i ;
});
});
// Calculate the average score and replace "?" value
$('#showAvg').click(function(){
$("#tableScore tr").each(function() {
var math = parseFloat($(this).find("td:eq(2)").text());
var physics= parseFloat($(this).find("td:eq(3)").text());
var chemistry= parseFloat($(this).find("td:eq(4)").text());
var avg = ((math physics chemistry)/3).toFixed(1);
$(this).find("td:eq(5)").text(avg);
});
});
// If average score >= 8 the letter will be red. I need help
$('#showBest').click(function(){
});
CSS 檔案：
#divTable {
display: none;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 50%;
}
uj5u.com熱心網友回復：
對于每一行，找到平均分數，如果它 > 8，則突出顯示該行：
$('#showBest').click(function(){
$('#tableScore tr').each(function(){
if ($(this).find('td:eq(5)').text() > 8) {
$(this).addClass('highlight');
// If you prefer to highlight just a column in this row, not the whole row:
// $(this).find('td:eq(5)').addClass('highlight')
}
})
});
CSS：
.highlight {
background-color: red;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439728.html
上一篇：如何呼叫可變的ajax