Javascript 当值更改为表时计算_Javascript_Php_Html_Ajax

Javascript 当值更改为表时计算

javascript php html ajax

Javascript 当值更改为表时计算,javascript,php,html,ajax,Javascript,Php,Html,Ajax,您好，我想在表的值发生变化时自动计算成绩，并将总数设置为成绩。有人能告诉我怎么做吗？我不知道任何事件，也不知道如何使用ajax。有人能帮我吗？我才刚开始学呢这是一些照片我的代码 <!DOCTYPE html> <html> <head> <title>Student Portal</title> <link rel="stylesheet" href ="css/bootstrap.min.css">

您好，我想在表的值发生变化时自动计算成绩，并将总数设置为成绩。有人能告诉我怎么做吗？我不知道任何事件，也不知道如何使用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>


学生门户
.有边框的桌子{
宽度：自动！重要；
利润上限：200px；
}
名称
长测验20%
出席率10%
家庭作业/海上作业20%
背诵10%
专业考试40%
等级
相等的
评论
函数计算（）
{
quick=document.getElementById（'quick'）；
attent=document.getElementById（'atten'）；
home=document.getElementById（'home'）；
reci=document.getElementById（'reci'）；
me=document.getElementById（'me'）；
q=quick.value/100*50+50；
a=衰减值/100*50+50；
h=home.value/100*50+50；
r=累进值/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；
等级=qt+at+ht+rt+mt；
}

前两个更改：为要显示结果的

提供一个“id”，并将“onchange”事件替换为“onkeydown”：

}

您是直接编辑表格，还是正在编辑表格？您实际上想在哪里监听更改并进行相应更新？@Connor我正在直接编辑表格。该表是可编辑的。@nethken，如果您使用的是

contenteditable

document.queryselectoral（“td[contenteditable']”；'循环浏览它们并附加一个

blur`事件侦听器，当您在编辑td后解除对td的聚焦时，该侦听器将被触发。@nethken下面是一个如何侦听更改的示例@康纳你好先生你能再看一下我的密码吗？我想把总成绩放到成绩栏。

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

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;       ◄■■■■■■■■■■■■■■■■■■■