Repeating jquery script in every row in table automatically

Question

I have problem with this script. When I change value in column "TO" in table, script substract automatically in column "Number of hours" only in first row value but others no. I need application script with name "PRO1" (updateDue) in every row in table.

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

I want dynamically change table. In column "FROM" and "TO" is value from database. This automatically subtract value (TO-FROM) and sum from this value is down. But when user change some value in column "FROM" or "TO", number will be count automatically. Thank you so much for every advice.

jiboulex · Accepted Answer · 2017-08-01T12:30:26.560

0

That's because you use the same ID for multiples TDs. You can't do that as an ID is supposed to be used once and help to identify a resource.

instead of an ID, you could use a class :

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

Then with jQuery, you can have access to your row values like this :

$('#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);
});

Also let me point that mysql functions are deprecated and you should not use them anymore. Use PDO instead. (See Why shouldn't I use mysql_* functions in PHP?)

edited Aug 01 '17 at 12:30

answered Aug 01 '17 at 09:57

jiboulex

2,963
2
18
28

Thank you very much. I tried this, but it's not correct. When I change class instead of id and modify jQuery always is result 0 and always only in first row :( – popx99 Aug 01 '17 at 11:53
I edited my answer, you should also use a class for remainingval, or you always make reference to the first occurence of the ID – jiboulex Aug 01 '17 at 12:30
Yes, you're big boss. Thank you very much. It's correct now. – popx99 Aug 01 '17 at 12:42

Repeating jquery script in every row in table automatically

1 Answers1