Correction status:qualified
Teacher's comments:
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; } ?>
点击 "运行实例" 按钮查看在线实例
运行效果如下: