收藏
批改状态：合格
老师批语：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格自动生成器</title>
<style type="text/css">
div {
width: auto;
margin: auto;
}
</style>
</head>
<body>
<div>
<h3>表格生成器</h3>
<p class="pOne">表格行数：<input type="text" id="inputOne"></p>
<p class="pTwo">表格列数：<input type="text" id="inputTwo"></p>
<p class="pThr">
<button class="make">生成表格</button>
<button class="reset">重置表格</button>
</p>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('.make').click(function () {
if ($('#inputOne').val().length != 0 && $('#inputTwo').val().length != 0) {
if ($('#inputOne').val() <= 0) {
$('#inputOne').after('<span style="color:red">行不能<0</span>');
setTimeout(function () {
$('#inputOne').next().remove();
}, 2000);
return false;
} else if ($('#inputTwo').val() <= 0) {
$('#inputTwo').after('<span style="color:red">列不能<0</span>');
setTimeout(function () {
$('#inputTwo').next().remove();
}, 2000);
return false;
}else if(isNaN($("#inputOne").val())){
$('#inputOne').after('<span style="color:red">必须是整数</span>');
setTimeout(function () {
$('#inputOne').next().remove();
}, 2000);
return false;
}else if(!$.isNumeric($('#inputTwo').val())){
$('#inputTwo').after('<span style="color:red">必须是整数</span>');
setTimeout(function () {
$('#inputTwo').next().remove();
}, 2000);
return false;
}
var flag = false;
if (!flag) {
flag = true;
$.get(
'makeTable.php',
{
rows: $('#inputOne').val(),
cols: $('#inputTwo').val()
},
function (data) {
$(".pThr").next().remove();
$(".pThr").after(data);
flag = false;
}
)
}
} else {
$('.pThr').after('<span style="color:red">行列不能为空</span>');
setTimeout(function () {
//2秒后,将提示信息删除
$('.pThr').next().remove();
}, 2000);
return false;
}
})
$(".reset").on('click', function () {
$('#inputOne').val('');
$('#inputTwo').val('');
$(".pThr").nextAll().remove();
flag = false;
})
</script>点击 "运行实例" 按钮查看在线实例
<?php
if (!empty($_GET['rows']) && !empty($_GET['cols'])) {
$rows = $_GET['rows'];
$cols = $_GET['cols'];
$table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%" class="table">';
$table = '<caption style="color: red ;background-color: #00CC99">title</caption>';
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i = 0; $i < $cols; $i++) {
$table .= "<th>{$i}</th>";
}
$table .= '</tr>';
//2.生成表格内容区
for ($r = 0; $r < $rows; $r++) {
$table .= '<tr>';
for ($c = 0; $c < $cols; $c++) {
//设置单元格的数据,数据与单元格数量对应
$data = $r * $cols + $c;
// ++$data: 可以确保从1开始计数,以确保符合人类正常思维
$table .= '<td align="center">' . ++$data . '</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//将生成的表格返回到客户端
echo $table;
//结束当前脚本,可以省略,但写上该语句是一个很好的编程习惯
exit();
}点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
