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

时间:2016-10-28 03:33:35

标签: javascript php mysql

我有一张表格,其中包含学生的详细信息和输入学生标记的选项。学生的详细信息来自MySQL DB。我试图根据输入标记填充总分,百分比和等级。 我只能为第一行进行计算。总分,百分比和等级的自动人口没有发生在第二排。表结构和脚本如下。附上我的桌子的屏幕截图也提供了。在屏幕截图中,只读字段使用脚本自动填充。 请帮忙。

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

1 个答案:

答案 0 :(得分:1)

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