Question

这是当我在相应的div中输入房间容量（例如Ex：20）时的代码，它给出了在该容量中呈现的不同分支的细节。但是当我编辑任何先前的输入强度时，更改不会反映在所需的div中

   <html>
    <head>
    <script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">                    </script>
    <link rel = "stylesheet" type = "text/css" href = "style.css" />

    <script>
       $(document).ready(function(){
        var x=2;
         var rem=0;   


        $('#add').click(function(){
           var maxfields=50;

           if(x<=maxfields)
           {      
              $('#more').append('<br><div id="p1">Room '+x+': <input type="text" name="room[]" maxlength="10"> Strength '+x+': <input type="text" name="stre[]" class="room"  min="1" max="36"><div id="div'+x+'">'+x+'</div></div></br>');
             x++;
           }
           else
           {
              alert('you reached the max limit');
           }

          });

       });
      </script>
    <style>
      input
      {
        height:30px;  
      }
       #add
      {
         background-color:#ffffff;
         font-family:arial;
         border-radius:5px;
         border-collapse:collapse;
         border:1px solid #d6d6d6;
         height:30px; 
       }
       td
       {
         height:30px;
         width:125px;
         text-align:center;
         font-weight:bold;
       }

      </style>
   </head>
   <body>
      <?php
         include('connect.php');
         $year=$_POST['yr'];
         $sem=$_POST['sm'];
         $date=$_POST['dt'];
         $course=$_POST['crs'];
         $session=$_POST['ss'];
         $reg=$_POST['reg'];

       session_start();
      $_SESSION['yr']=$year;
      $_SESSION['sm']=$sem;
      $_SESSION['dt']=$date;
      $_SESSION['crs']=$course;
      $_SESSION['ss']=$session;
      $_SESSION['rg']=$reg;


      $sql="select * from seating where year='$year' and sem='$sem' and course='$course' and session='$session' and reg='$reg' and date='$date'";
      $query=mysql_query($sql);
      $count=mysql_num_rows($query);
   ?>

    <center><table border='1'>
      <tr><td>Total Strength</td><td>Remaining</td></tr>
     <tr><td><?php echo"$count";?></td><td><div id="rem"></div></td></tr>
    </table></center>


    <br></br>
    <div class='disp'>
    <button id="add">Add Room</button><br></br>
      <form method="post" action="rooms_post.php" target="_parent">
     <div id="p1">Room 1: <input type="text" name="room[]" maxlength="10"> Strength 1: <input type="text" name="stre[]" class="room" min="1" max="36">      <div id="div1">This is div1</div></div><br>
     <div id="more"></div></div><br>
      <input type="submit" name="submit" value="submit" class="btn-success" disabled="disabled" />
      </form>
    </div>

   <script>
        var rem=0;
        var tot=<?php echo $count; ?>;
        $("#rem").html(tot).val()

        $(document).on("change",".room",function(){

               var sum = 0;
               var k=0;

              $(".room").each(function(){

                   k=k+1;       
                   sum += +$(this).val();
                   var cap=$(this).val();
                   var start=sum-cap+1;     
                   var end=sum;
                  alert(k); 
                  $.ajax({
                       type:'POST',
                       url:'disp.php',
                       data:'start_id='+start+'&end_id='+end,
                       success:function(gethtml)
                     {
                         $('#div'+k+').html(gethtml);                   
                     }
                 });

            });

               if(sum%4==0)
               {

                  rem=tot-sum;

                      $("#rem").html(rem).val()

                        if(rem==0)
                        {
                          $("#add").attr("disabled", true);
                          $(".btn-success").attr("disabled", false);    
                          $("#rem").css("background-color", "#ffa5a5");  
                        }
                        else if(rem<0)
                        {
                           alert('Capacity exceeded the remaining');
                           $(".btn-success").attr("disabled", true);    
                           $("#add").attr("disabled", true);    
                        }
                        else
                        {
                            $("#add").attr("disabled", false);   
                            $(".btn-success").attr("disabled", true);
                            $("#rem").css("background-color", "#a9fc97");    
                        }
                     }
                    else
                    {

                      alert('Capacity must be multiple of 4');
                      $(".btn-success").attr("disabled", true); 
                      $("#add").attr("disabled", true); 
                    }  
                   });

                  </script>

          </body>
        </html>

和另一个程序disp.php在这里给出

      <html>
       <head>

       </head>

    <?php

        include('connect.php');

        $start=$_POST['start_id'];
        $end=$_POST['end_id'];

        $sql="select branch,count(*) as ct from seating where id between $start and $end group by branch";
        $query=mysql_query($sql);

        while($row=mysql_fetch_array($query))
        {
           $br=$row['branch'];
           $ct=$row['ct'];

          echo"$br -> $ct,";         
        }


       ?>
      </html>

Answer 1

将您的更改功能更改为

$（文件）。在（ “变化”， “房间”，函数（）{

           var sum = 0;
           var k=0;

          $(".room").each(function(){

               k=k+1;       
               sum += +$(this).val();
               var cap=$(this).val();
               var start=sum-cap+1;     
               var end=sum;
              alert(k); 
              $.ajax({
                   type:'POST',
                   url:'disp.php',
                   data:'start_id='+start+'&end_id='+end,
                   success:function(gethtml)
                 {
                     $('#div'+k).html(gethtml);                   
                 }
             });

        });

div没有使用jquery进行更新

1 个答案: