这是我创建动态div的代码，当我输入房间的强度时，它将显示相应div中的座位的起始和结束数字。但是当我改变之前输入的房间的强度时，开始和结束的数字在div中没有变化
第一个程序是表单
<html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel = "stylesheet" type = "text/css" href = "style.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
$( "#datepicker" ).datepicker({
dateFormat:'yy-mm-dd'
});
});
</script>
<style>
input
{
height:30px;
}
</style>
</head>
<body>
<form method="post" action="test1.php" target="_blank">
<center><table border="0">
<tr>
<td class="td-font">Select the Year:</td>
<td class="td-details">
<select name="yr" id="yr" class="select-type" required>
<option value="" selected>---Select---</option>
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
<option value="4">4 </option>
</select>
</td>
</tr>
<tr>
<td class="td-font">Select the Sem:</td>
<td class="td-details">
<select name="sm" id="sm" class="select-type" required>
<option value="" selected>---Select---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td class="td-font">Select the Course:</td>
<td class="td-details">
<select name="crs" class="select-type" required>
<option value="" selected>---Select---</option>
<option value="1A">B.Tech</option>
<option value="1R">B.Pharma</option>
</select>
</td>
</tr>
<tr>
<td class="td-font">Select the reg:</td>
<td class="td-details">
<select name="reg" class="select-type" required>
<option value="" selected>---Select---</option>
<option value="R07">R07 Reg</option>
<option value="R10">R10 Reg</option>
<option value="R13">R13 Reg</option>
</select>
</td>
</tr>
<tr>
<td class="td-font">Select Date:</td>
<td class="td-details">
<input type="text" id="datepicker" name="dt" required>
</td>
</tr>
<tr>
<td class="td-font">Select the Session:</td>
<td class="td-details">
<select name="ss" class="select-type" required>
<option value="" selected>---Select---</option>
<option value="FN">FN </option>
<option value="AN">AN</option>
</select>
</td>
</tr>
<tr>
<td colspan=2><center><input type="submit" name="submit" value="submit" class="btn-success"></center></td>
<tr>
</table></center>
</form>
</body>
</html>
第二个程序从这里开始
<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(start);
alert(end);
$.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'];
echo"from $start to $end";
?>
</html>