
html文件内容
<html>
<meta http-equiv="Content-type" content="text/htmlcharset=utf-8" ></meta>
<head>
<title>
demo
</title>
<script src="jquery.js" type="text/javascript"></script><!--引入jquery -->
<script>
function getarea(){
var region_id = $("#region").val()//获得下拉框中大区域的值
if(region_id != ''){
$.ajax({
type: "post",
url: "b.php",
data:"region_id="+region_id,
cache:false,
beforeSend: function(XMLHttpRequest){
},
success: function(data, textStatus){
//alert(data)
$("#area").empty()//清空area下拉框
$("#area").append(data)//给area下拉框添加option
},
complete: function(XMLHttpRequest, textStatus){
},
error: function(){
//请求出错处理
}
})
}
}
</script>
</head>
<body>
<div >
<table class='itable' width='100%' id='timetable' >
<tr>
<td class="test_c" id="one">
<select id="region" name="region" onchange="getarea()">
<option value="">请选择</option>
<option value="1">东北</option>
<option value="2">华北</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="area" name="area">
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
=============
b.php内容
<?php
$region_id = $_POST['region_id']
//根据前台传过来的region_id来处理下拉框的内容.
//这里演示直接输出,你可以从数据库中读出来组织后再输出.
switch($region_id){
case 1:{
$area_option = "<option value='1'>辽宁</option><br><option value='2'>吉宁</option><br><option value='3'>黑龙江</option>"
echo $area_option
break
}
case 2:{
$area_option = "<option value='4'>北京</option><option value='5'>天津</option><option value='6'>河北</option>"
echo $area_option
break
}
}
?>
这个得用JS来实现。因为PHP作为服务器脚本,和浏览器通信时是要刷新前端页面的。例如你要添加3个框,你得先把3提交给服务器,然后服务器再返回浏览器3个框的代码,这个过程费时,页面重新刷新会占用流量,并且服务器端的脚本一般是做逻辑处理和数据库 *** 作的,用他来做前端的页面呈现可以,但基本没人这样做,因为这样做很奇怪。PHP动态的生成表格实际上是处理html中的tr标签(行)td标签(列)。所以在行和列已知的情况下行和列分别用rows和clos,用两个for语句就能方便的写出tr和td标签,td代码的for语句镶嵌在tr代码的for语句之内:
<?php
header("Content-type:text/htmlcharset=GB2312")
?>
<table border="1" width="600">
<?php
for($i=0$i<$_GET['rows']$i++):
echo"<tr>"
for($n=0$n<$_GET['cols']$n++):
echo"<td></td>"
endfor
echo"</tr>"
endfor
?>
</table>
<h1>表格的绘制</h1>
<form>
<input type="text" name="rows"/></br>
<input type="text" name="cols"/></br>
<input type="submit" name="submit"/>
</form>
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)