4.13-表格自动生成！
html代码如下：
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>4.13-表格自动生成！</title>
<style type="text/css">
input{width:150px;}
button{margin-left:20px;border:none;background-color:green;color:white;padding:5px;width:60px;}
</style>
</head>
<body>
<div>
<p>行:<input type="text"></p>
<p>列:<input type="text"></p>
<p>
<button>生成</button>
<button>重置</button>
</p>
<p></p>
</div>
</body>
</html>
<script>
var n = 1
$(":button:first").click(function(){
$(':input').not('button').each(function(a,b){
if($(b).val().length == 0 ){
$(b).after('<span>不能为空!</span>')
setTimeout(function(){
$(b).next().remove()
},1000)
return false
}else if(isNaN($(b).val())){
$(b).after('<span>只能为数字!</span>')
setTimeout(function(){
$(b).next().remove()
},1000)
return false
}else if($(b).val() <= 0){
$(b).after('<span>数字必须大于零!</span>')
setTimeout(function(){
$(b).next().remove()
},1000)
return false
}
if(n = 1){
$.get('post.php',{
row: $(':input').eq(0).val(),
col: $(':input').eq(1).val()
},function(data){
$('p:last').empty()
$('p:last').html(data)
n = 0
})
}
})
})
$(":button:last").click(function(){
$('p:last').empty()
row: $(':input').eq(0).val('')
col: $(':input').eq(1).val('')
row: $(':input').eq(0).focus()
n = 1
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
php代码如下：
实例
<?php
if($_SERVER['REQUEST_METHOD'] == 'GET'){
if(!empty($_GET['row']) && !empty($_GET['col'])){
$row = $_GET['row'];
$col = $_GET['col'];
$tb = '<table border="1" width="85%" align="center" cellspacing="0">';
$tb .= '<caption>表格自动生成！</caption>';
$tb = $tb.'<tr>';
for($i=0;$i<$col;$i++){
$tb = $tb.'<th bgcolor="green">XXX</th>';
}
$tb = $tb.'</tr>';
for($r=0;$r<$row;$r++){
$tb = $tb.'<tr align="center">';
for($c=0;$c<$col;$c++){
$q = $r*$col+$c;
$tb = $tb."<td>".++$q."</td>";
}
$tb = $tb.'</tr>';
}
}
$tb = $tb.'</table>';
echo $tb;
}
?>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果如下：
