Question

我对此脚本有疑问。当我在表中的“TO”列中更改值时，脚本仅在第一行值中的“小时数”列中自动减去，但其他值为no。我需要在表的每一行中使用名称为“PRO1”（updateDue）的应用程序脚本。

<meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
        <body onload="changeText()">
            <?php
                $date = date('Y-m-01');
                $end = date('Y-m-t');
                //, strtotime('-1 months')//
            ?>
            <?php include 'dbconfig.php' ?>
            <table border="1" id="myTable">
                <tr>
                    <td>Date</td>
                    <td>From</td>
                    <td>To</td>
                    <td>Number of hours</td>
                </tr>
                <tr class="item">
                    <?php
                        date_default_timezone_set('UTC');
                       while(strtotime($date) <= strtotime($end)) {     
                           $day_num = date('d', strtotime($date));
                           $day_name= date('l', strtotime($date));
                           $date = date("Y-m-d", strtotime("+1 day", strtotime($date)));
                           if (($day_name == "Saturday")||($day_name == "Sunday"))
                           {
                               echo "<td id='color'>$day_num $day_name</td><td></td><td></td><td></td></tr>";
                           }    
                           else { 
                               echo "<td>$day_num $day_name</td><td>";
                               $query = mysql_query("SELECT * FROM norma") or die(mysql_error());
                               while($query_row = mysql_fetch_assoc ($query))
                               {
                                   $starter= $query_row['start'];
                                   echo "<input type='text' class='txtCal' id='num1' onchange='updateDue()' value=".$query_row['start'].">";
                               }
                               echo "</td><td>";
                               $query = mysql_query("SELECT * FROM norma") or die(mysql_error());
                               while($query_row = mysql_fetch_assoc ($query))
                               {
                                   $finisher= $query_row['end'];
                                   echo "<input type='text' class='txtCal' id='num2' onchange='updateDue()' value=".$query_row['end'].">";
                               }
                               echo "</td><td>";
                               $ts1 = strtotime($starter);
                               $ts2 = strtotime($finisher);     
                               $seconds_diff = $ts2 - $ts1;                            
                               $time = ($seconds_diff/3600);
                               echo "<input type='text' class='txtCal2' id='remainingval' value=".number_format((float)$time, 2, '.', '').">";
                               echo "</td></tr>";
                           }    
                       }
                   ?>
               </tr>
               <tr>
                   <td></td>
                   <td></td>
                   <td>Sum:</td>
                   <td id="total_sum_value"><span id="total_sum_value"></span></td>
               </tr>
           </table>
           <br>
<!-- SCRIPT NAME PRO1 -->
<script>
    function updateDue() {
        $('#myTable tr').each(function(){
            var total = parseFloat(document.getElementById("num2").value);
            var val2 = parseFloat(document.getElementById("num1").value);
            // to make sure that they are numbers
            if (!total) { total = 0; }
            if (!val2) { val2 = 0; }
            var ansD = document.getElementById("remainingval");
            ansD.value = total - val2;
       });
    }
</script>
<script>
    $(document).ready(function changeText(){
        $(document).ready(function changeText(){
            var calculated_total_sum = 0;

            $("#myTable .txtCal2").each(function () {
                var get_textbox_value = $(this).val();
                calculated_total_sum += parseFloat(get_textbox_value);                 
            });
            $("#total_sum_value").html(calculated_total_sum);
        }); 
        $("#myTable").on('change','input', '.txtCal2', function () {
            var calculated_total_sum = 0;

            $("#myTable .txtCal2").each(function () {
                var get_textbox_value = $(this).val();
                if ($.isNumeric(get_textbox_value)) {
                    calculated_total_sum += parseFloat(get_textbox_value);  
                }             
            });
            $("#total_sum_value").html(calculated_total_sum);
        }); 
    });
</script>

我想动态更改表格。列“FROM”和“TO”是数据库中的值。这会自动减去值（TO-FROM），并且该值的总和为down。但是当用户在“FROM”或“TO”列中更改某个值时，数字将自动计数。非常感谢您的每一条建议。

Answer 1

那是因为您对多个TD使用相同的ID。您不能这样做，因为ID应该被使用一次并帮助识别资源。

而不是ID，您可以使用类：

<table>
    ...
    <tr>
        <td><input type="text" class="txtCal num1" value="5" /></td>
        <td><input type="text" class="txtCal num2" value="10" /></td>
        <td><input type="text" class="txtCal2 remainingval" value="...">
    </tr>
    ...
</table>

然后使用jQuery，您可以访问您的行值，如下所示：

$('#myTable tr').each(function(){
    var total = parseFloat($(this).find('.num2').val());
    var val2 = parseFloat($(this).find('.num1').val());

    ...
    var ansD = $(this).find(".remainingval");
    ansD.val(total - val2);
});

另外请允许我指出不推荐使用mysql函数，不应再使用它们了。请改用PDO。（见Why shouldn't I use mysql_* functions in PHP?）

自动在表中的每一行重复jquery脚本

1 个答案: