2017-08-30 73 views
0

这里是代码当我进入房间容量(比如说:20)在各自的div它给出了20个容量中呈现的不同分支的细节。但是当我修改任何先前输入的强度的改变也不会在所需的divdiv不更新使用jquery

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

你'变种的多个版本rem;' - 一个是全球性的,一个是准备好文件的地方,你可能想解决这个问题。我会把你所有的js放在一起,这样你不会得到像这样的错误,这使得它更容易维护 – Pete

+0

如果你移动'$('#'')。append .....'等等到else语句,它将新数据附加到'#more'?这会告诉你这是否是if语句的错误。 – denski

+0

你也可以'$('#more')。append('test text');'看看是否简化它也可以。 – denski

回答

0

变化的更改功能

的$(document)。在( “变”, “房间”,函数(){

  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);     
       } 
      }); 

     });