javascript - 无法使用脚本自动填充 PHP MYSQL 动态表(文本字段)中的值

标签 javascript php mysql

我有一个表格，其中包含学生的详细信息和用于输入学生分数的选项。学生详细信息从 MySQL DB 获取。我正在尝试根据输入的分数填充总分、百分比和成绩。 我只能对第一行进行计算。总分、百分比和成绩的自动填充不是从第二行开始的。表结构和脚本如下所示。还附上了我的 table 的屏幕截图。在屏幕截图中，只读字段是使用脚本自动填充的。 请帮忙。

HTML 表格结构

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>
                <center>
                    Srl#
                </center>
            </th>
            <th>
                <center>
                    ID
                </center>
            </th>
            <th>
                <center>
                    Student Name
                </center>
            </th>
            <th width="8%">
                <center>
                    Unit Test
                </center>
            </th>
            <th colspan="4">
                <center>
                    Individual Activity
                </center>
            </th>
            <th width="6%">
                <center>
                    Total
                </center>
            </th>
            <th colspan="4">
                <center>
                    Group Activity
                </center>
            </th>
            <th width="6%">
                <center>
                    Total
                </center>
            </th>   
            <th width="9%">
                <center>
                    Grand Total
                </center>
            </th>
            <th>
                <center>
                    %
                </center>
            </th>
            <th>
                <center>
                    Grade
                </center>
            </th>
        </tr>
</thead>
<tbody>
    <?php
    if (isset($_POST['stmkadls'])) {
        $stcl = $_POST['stcls'];
        $stdv = $_POST['stdv'];

        $sql = "select gps_div_id as dvid,gps_st_uid as stuid,gps_st_name as stnm,gps_st_class as stcl,gps_st_division as stdv from gps_stdnt_class_div_xref where gps_st_class = '$stcl' and gps_st_division = '$stdv' and gps_st_div_stat = 'Y' order by gps_st_name";

        $result = mysqli_query($GLOBALS["___mysqli_ston"], $sql) or die(((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
        if (mysqli_num_rows($result) > 0)
            $no = 1;
        while ($row = mysqli_fetch_array($result)) {
            $dvid = $row['dvid'];
            $stuid = $row['stuid'];
            $stnm = $row['stnm'];
            $stcl = $row['stcl'];
            $stdv = $row['stdv'];
            ?>                                                            
            <tr>

                <td class="highlight">
                    <div class="success">
                        <a href="javascript:;">
                            <?php echo $no ?> </a>
                    </div>    
                </td>
                <td>
                    <?php echo $stuid ?>
                </td>
                <td>
                    <?php echo $stnm ?>
                </td>
                <td>
                    <input type="number" name="utst" id="utst" class="form-control form-filter">
                </td>
                <td>
                    <input type="text" name="iam1" id="iam1" class="form-control form-filter" onkeyup="sum();" required>
                </td>
                <td>
                    <input type="text" name="iam2" id="iam2" class="form-control form-filter" onkeyup="sum();" required >
                </td>
                <td>
                    <input type="text" name="iam3" id="iam3" class="form-control form-filter" onkeyup="sum();" required >
                </td>
                <td>
                    <input type="text" name="iam4" id="iam4" class="form-control form-filter" onkeyup="sum();" required >
                </td>
                <td>
                    <input type="text" name="iamtot" id="iamtot" class="form-control form-filter" readonly >
                </td>
                <td>
                    <input type="text" name="gam1" id="gam1" class="form-control form-filter" onkeyup="sum();" required>
                </td>
                <td>
                    <input type="text" name="gam2" id="gam2" class="form-control form-filter" onkeyup="sum();" required>
                </td>
                <td>
                    <input type="text" name="gam3" id="gam3" class="form-control form-filter" onkeyup="sum();" required>
                </td>
                <td>
                    <input type="text" name="gam4" id="gam4" class="form-control form-filter" onkeyup="sum();" required>
                </td>
                <td>
                    <input type="text" name="gamtot" id="gamtot" class="form-control form-filter" readonly >
                </td>
                <td>
                    <span class="center">
                        <input type="text" name="grntot" id="grntot" class="form-control form-filter" readonly >
                    </span>
                </td>
                <td>
                    <input type="text" name="percent" id="percent" class="form-control form-filter" readonly >
                </td>
                <td>
                    <input type="text" name="grade" id="grade" class="form-control form-filter" readonly >
                </td>

                <?php $no++; ?>
            </tr>
        <?php
        }
    }
    ?>                          
</tbody>

</table>

用于计算总数和百分比的脚本。

<script>
function sum() {
            var Iam1 = document.getElementById('iam1').value;
            if (Iam1=='')           
            Iam1 = parseInt('0');

            var Iam2 = document.getElementById('iam2').value;
            if (Iam2=='')
            Iam2 = parseInt('0');

            var Iam3 = document.getElementById('iam3').value;
            if (Iam3=='')
            Iam3 = parseInt('0');

            var Iam4 = document.getElementById('iam4').value;
            if (Iam4=='')
            Iam4 = parseInt('0');

            var iamtot = parseInt(Iam1) + parseInt(Iam2) + parseInt(Iam3) + parseInt(Iam4);
            document.getElementById('iamtot').value = iamtot;

            var Gam1 = document.getElementById('gam1').value;
            if (Gam1=='')           
            Gam1 = parseInt('0');

            var Gam2 = document.getElementById('gam2').value;
            if (Gam2=='')
            Gam2 = parseInt('0');

            var Gam3 = document.getElementById('gam3').value;
            if (Gam3=='')
            Gam3 = parseInt('0');

            var Gam4 = document.getElementById('gam4').value;
            if (Gam4=='')
            Gam4 = parseInt('0');

            var gamtot = parseInt(Gam1) + parseInt(Gam2) + parseInt(Gam3) + parseInt(Gam4);
            document.getElementById('gamtot').value = gamtot;  

            var UtSt = document.getElementById('utst').value;
            if (UtSt=='')
            UtSt = parseInt('0');

            var max =  Math.max(iamtot,gamtot);
            var grt = (parseInt(max) + parseInt(UtSt))/2;
            var grt = grt.toFixed(2);
            document.getElementById('grntot').value = grt;

            var per = (parseInt(grt)/20)*100;
            document.getElementById('percent').value = per;

            var Grade; 
                        if( parseInt(per) >= 90 ){
                            Grade = "A1";
                        }
                        else if( parseInt(per) >= 80 ){
                            Grade = "A2";
                        }
                        else if( parseInt(per) >= 70 ){
                            Grade = "B1";
                        }
                        else if( parseInt(per) >= 60 ){
                            Grade = "B2";
                        }
                        else if( parseInt(per) >= 50 ){
                            Grade = "C1";
                        }
                        else if( parseInt(per) >= 40 ){
                            Grade = "C2";
                        }
                        else if( parseInt(per) >= 33 ){
                            Grade = "D";
                        }
                        else if( parseInt(per) >= 21 ){
                            Grade = "E1";
                        }
                        else {
                            Grade = "E2";
                        }
            document.getElementById('grade').value = Grade;
        }
  </script>

enter image description here

最佳答案

在 Sean 给出的提示的帮助下，我进行了更改，使上面的代码中的 ID 是唯一的。它按预期工作。附加 HTML 代码和脚本。

修改了 HTML 表格结构。

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>
    <center>
        Srl#
    </center>
            </th>
<th>
<center>
    ID
</center>
</th>
<th>
<center>
    Student Name
</center>
</th>
<th width="8%">
<center>
    Unit Test
</center>
</th>
<th colspan="4">
<center>
    Individual Activity
</center>
</th>
<th width="6%">
<center>
    Total
</center>
</th>
<th colspan="4">
<center>
    Group Activity
</center>
</th>
<th width="6%">
<center>
    Total
</center>
</th>   
<th width="9%">
<center>
    Grand Total
</center>
</th>
<th>
<center>
    %
</center>
</th>
<th>
<center>
    Grade
</center>
</th>
</tr>
</thead>
<tbody>
    <?php
    if (isset($_POST['stmkadls'])) {
        $stcl = $_POST['stcls'];
        $stdv = $_POST['stdv'];

        $sql = "select gps_div_id as dvid,gps_st_uid as stuid,gps_st_name as stnm,gps_st_class as stcl,gps_st_division as stdv from gps_stdnt_class_div_xref where gps_st_class = '$stcl' and gps_st_division = '$stdv' and gps_st_div_stat = 'Y' order by gps_st_name";

        $result = mysqli_query($GLOBALS["___mysqli_ston"], $sql) or die(((is_object($GLOBALS["___mysqli_ston"])) ? mysqli_error($GLOBALS["___mysqli_ston"]) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));
        if (mysqli_num_rows($result) > 0)
            $no = 1;
        while ($row = mysqli_fetch_array($result)) {
            $dvid = $row['dvid'];
            $stuid = $row['stuid'];
            $stnm = $row['stnm'];
            $stcl = $row['stcl'];
            $stdv = $row['stdv'];
            ?>                                                            
            <tr>
                <td class="highlight">
                    <div class="success">
                        <a href="javascript:;">
                            <?php echo $no ?> </a>
                    </div>    
                </td>
                <td>
                    <?php echo $stuid ?>
                </td>
                <td>
                    <?php echo $stnm ?>
                </td>
                <td>
                    <input type="number" name="utst" id="utst<?php echo $no ?>" class="form-control form-filter">
                </td>
                <td>
                    <input type="text" name="iam1" id="iam1<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
                </td>
                <td>
                    <input type="text" name="iam2" id="iam2<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required >
                </td>
                <td>
                    <input type="text" name="iam3" id="iam3<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required >
                </td>
                <td>
                    <input type="text" name="iam4" id="iam4<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required >
                </td>
                <td>
                    <input type="text" name="iamtot" id="iamtot<?php echo $no ?>" class="form-control form-filter" readonly >
                </td>
                <td>
                    <input type="text" name="gam1" id="gam1<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
                </td>
                <td>
                    <input type="text" name="gam2" id="gam2<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
                </td>
                <td>
                    <input type="text" name="gam3" id="gam3<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
                </td>
                <td>
                    <input type="text" name="gam4" id="gam4<?php echo $no ?>" class="form-control form-filter" onkeyup="sum(<?php echo $no ?>);" required>
                </td>
                <td>
                    <input type="text" name="gamtot" id="gamtot<?php echo $no ?>" class="form-control form-filter" readonly >
                </td>
                <td>
                    <span class="center">
                        <input type="text" name="grntot" id="grntot<?php echo $no ?>" class="form-control form-filter" readonly >
                    </span>
                </td>
                <td>
                    <input type="text" name="percent" id="percent<?php echo $no ?>" class="form-control form-filter" readonly >
                </td>
                <td>
                    <input type="text" name="grade" id="grade<?php echo $no ?>" class="form-control form-filter" readonly >
                </td>

                <?php $no++; ?>
            </tr>
        <?php
        }
    }
    ?>                          
</tbody>
</table>

修改后的脚本

<script>
function sum(obj) {
            var Iam1 = document.getElementById('iam1'+obj).value;
            if (Iam1=='')           
            Iam1 = parseInt('0');

            var Iam2 = document.getElementById('iam2'+obj).value;
            if (Iam2=='')
            Iam2 = parseInt('0');

            var Iam3 = document.getElementById('iam3'+obj).value;
            if (Iam3=='')
            Iam3 = parseInt('0');

            var Iam4 = document.getElementById('iam4'+obj).value;
            if (Iam4=='')
            Iam4 = parseInt('0');

            var iamtot = parseInt(Iam1) + parseInt(Iam2) + parseInt(Iam3) + parseInt(Iam4);
            document.getElementById('iamtot'+obj).value = iamtot;

            var Gam1 = document.getElementById('gam1'+obj).value;
            if (Gam1=='')           
            Gam1 = parseInt('0');

            var Gam2 = document.getElementById('gam2'+obj).value;
            if (Gam2=='')
            Gam2 = parseInt('0');

            var Gam3 = document.getElementById('gam3'+obj).value;
            if (Gam3=='')
            Gam3 = parseInt('0');

            var Gam4 = document.getElementById('gam4'+obj).value;
            if (Gam4=='')
            Gam4 = parseInt('0');

            var gamtot = parseInt(Gam1) + parseInt(Gam2) + parseInt(Gam3) + parseInt(Gam4);
            document.getElementById('gamtot'+obj).value = gamtot;  

            var UtSt = document.getElementById('utst'+obj).value;
            if (UtSt=='')
            UtSt = parseInt('0');

            var max =  Math.max(iamtot,gamtot);
            var grt = (parseInt(max) + parseInt(UtSt))/2;
            var grt = grt.toFixed(2);
            document.getElementById('grntot'+obj).value = grt;

            var per = (parseInt(grt)/20)*100;
            document.getElementById('percent'+obj).value = per;

            var Grade; 
                        if( parseInt(per) >= 90 ){
                            Grade = "A1";
                        }
                        else if( parseInt(per) >= 80 ){
                            Grade = "A2";
                        }
                        else if( parseInt(per) >= 70 ){
                            Grade = "B1";
                        }
                        else if( parseInt(per) >= 60 ){
                            Grade = "B2";
                        }
                        else if( parseInt(per) >= 50 ){
                            Grade = "C1";
                        }
                        else if( parseInt(per) >= 40 ){
                            Grade = "C2";
                        }
                        else if( parseInt(per) >= 33 ){
                            Grade = "D";
                        }
                        else if( parseInt(per) >= 21 ){
                            Grade = "E1";
                        }
                        else {
                            Grade = "E2";
                        }
            document.getElementById('grade'+obj).value = Grade;
        }
  </script>

关于javascript - 无法使用脚本自动填充 PHP MYSQL 动态表(文本字段)中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40297640/

上一篇：mysql - MySql 中的排名逻辑问题

下一篇：MySQL - 无法查询现有表

相关文章：

php - MySQL查询的解决方案

php - 单一 Eloquent 关系的多个表

php - 订购关键字结果相关性

php - 想要使用 PDO 制作复选框过滤器

javascript - queue.js不是异步的？

javascript - SQLite 在 Javascript Node.JS 中将变量值插入为 Null

javascript - AngularJS 复选框选中自定义值

javascript - javascript 中的 Jinja 模板

java - 如何使用php从Android将数据插入mysql数据库？

PHP 或 MySQL - 如何在许多具有相同值的表行中只显示一个表行

©2024 IT工具网  联系我们