gpt4 book ai didi

javascript - 计算表中值发生变化的时间

转载 作者:行者123 更新时间:2023-11-27 22:42:32 25 4
gpt4 key购买 nike

您好,我想在表的值发生变化时自动计算成绩并将总分放入成绩中。有人可以给我一些想法如何做到这一点吗?我不知道任何事件,也不知道如何使用ajax。有人可以帮我解决这个问题吗?我刚刚开始学习。

这里有一些图片 enter image description here

我的代码

<!DOCTYPE html>
<html>
<head>

<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="shortcut icon" type="img/png" href="img/gapclogo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.table-bordered{
width: auto !important;
margin-top: 200px;
}
</style>
</head>
<body>


<table class="table table-bordered" align="center" >

<thead>
<tr>
<th width="300">Name</th>
<th width="100">Long Quiz 20%</th>
<th width="100">Attendance 10%</th>
<th width="100">Homework/Seatwork 20%</th>
<th width="100">Recitation 10%</th>
<th width="100">Major Exam 40%</th>
<th width="100">Grade</th>
<th width="100">Equivalent</th>
<th width="100">Remarks</th>

</tr>
</thead>
<tbody>

<tr>
<td></td>
<td contenteditable="true" onchange="Calculate();" id="quiz"></td>
<td contenteditable="true" onchange="Calculate();" id="atten"></td>
<td contenteditable="true" onchange="Calculate();" id="home"></td>
<td contenteditable="true" onchange="Calculate();" id="reci"></td>
<td contenteditable="true" onchange="Calculate();" id="me"></td>
<td ></td>
<td ></td>
<td ></td>
</tr>

</tbody>
</table>


<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function Calculate()
{
quiz = document.getElementById('quiz');
attend = document.getElementById('atten');
home = document.getElementById('home');
reci = document.getElementById('reci');
me = document.getElementById('me');

q = quiz.value / 100 * 50 + 50;
a = atten.value / 100 * 50 + 50;
h = home.value / 100 * 50 + 50;
r = reci.value / 100 * 50 + 50;
m = me.value / 100 * 50 + 50;

qt = q * 0.2;
at = a * 0.1;
ht = h * 0.2;
rt = r * 0.1;
mt = m * 0.4;

grade = qt + at + ht + rt + mt;
}
</script>
</body>
</html>

最佳答案

前两项更改:为 <td> 提供一个“id”在您想要显示结果的位置,并将“onchange”事件替换为“onkeydown”:

    <tr>
<td></td> ▼
<td contenteditable="true" onkeydown="Calculate();" id="quiz"></td>
<td contenteditable="true" onkeydown="Calculate();" id="atten"></td>
<td contenteditable="true" onkeydown="Calculate();" id="home"></td>
<td contenteditable="true" onkeydown="Calculate();" id="reci"></td>
<td contenteditable="true" onkeydown="Calculate();" id="me"></td>
<td id="td_grade"></td> ◄■■■■
<td ></td>
<td ></td>
</tr>

现在让我们更改您的“计算”功能:您正在编辑 <td>标签,所以你必须使用“innerHTML”而不是“value”,并将结果存储在“td_grade”中:

function Calculate()
{
quiz = document.getElementById('quiz');
attend = document.getElementById('atten');
home = document.getElementById('home');
reci = document.getElementById('reci');
me = document.getElementById('me');

q = quiz.innerHTML / 100 * 50 + 50; ◄■■■■■■■■■■■■■■■■■■■
a = atten.innerHTML / 100 * 50 + 50; ◄■■■■■■■■■■■■■■■■■■■
h = home.innerHTML / 100 * 50 + 50; ◄■■■■■■■■■■■■■■■■■■■
r = reci.innerHTML / 100 * 50 + 50; ◄■■■■■■■■■■■■■■■■■■■
m = me.innerHTML / 100 * 50 + 50; ◄■■■■■■■■■■■■■■■■■■■

qt = q * 0.2;
at = a * 0.1;
ht = h * 0.2;
rt = r * 0.1;
mt = m * 0.4;

grade = qt + at + ht + rt + mt;
document.getElementById('td_grade').innerHTML = grade; ◄■■■■■■■■■■■■■■■■■■■

}

关于javascript - 计算表中值发生变化的时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38641671/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com