Question

您好我希望在表格的值发生变化时自动计算成绩，并将总数计入成绩。有人可以给我一些想法吗？我不知道任何事件，我不知道如何使用ajax。有人可以帮我这个吗？我刚刚开始学习它。

这里有一些图片

我的代码

<!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>

Answer 1

前两个更改：为要显示结果的<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;       ◄■■■■■■■■■■■■■■■■■■■

}

计算值何时更改为表格

1 个答案: