php表格生成器代码,PHP课程第18天 表格自动生成器（带标题）

HTML实例部分：

html>

PHP 表格自动生成器

h3 {

color: green;

margin-left:40px;

}

button {

width: 80px;

height: 30px;

border: none;

background-color: green;

color:white;

margin-right: 30px;

}

表格生成器

输入行:

输入列:

生成表格重置行列

JS代码部分(table.js)//创建请求标志,防止重复请求

var flag = true

$('button:first').on('click',function(){

//第一步:遍历并验证用户的输入信息

//$(选择器).each(对象索引,当前对象):用来循环遍历获取到所有jquery对象

$(':input').not('button').each(function(index,obj){

//非空判断

if ($(obj).val().length == 0) {

//在当前元素后添加提示信息

$(obj).after('不能为空')

//用定时器使提示信息2秒后消失

setTimeout(function(){

//2秒后,将提示信息删除

$(obj).next().remove()

},2000)

//返回让用户重新操作

return false

//非数字判断

} else if (isNaN($(obj).val())) {

$(obj).after('必须是数字')

setTimeout(function(){

$(obj).next().remove()

},2000)

return false

//零值判断

} else if ($(obj).val() <= 0) {

$(obj).after('必须大于0')

setTimeout(function(){

$(obj).next().remove()

},2000)

return false

}

})

//第二点:处理用户的请求(Ajax实现)

if (flag == true) {//这里必须为true，否则无法提交，

$.get(

//1.请求处理的脚本

'table.php',

//2.发送的请求参数

{

rows: $('input[name="rows"]').val(),

cols: $('input[name="cols"]').val()

},

//3.请求成功的回调函数

function(data){

//先将上一次生成的表格删除

$('p:last').next().remove()

//生成新的表格

$('p:last').after(data)

//将请求标志设置为flase,禁止重复请求

flag = false

}

)

}

})

//重置按钮

$('button').eq(1).click(function(){

//将行与列数据全部清空

$(':input').not('button').val('')

//将输入焦点重置到行文本框上

$(':input:first').focus()

//将上一次请求生成的表格删除

$('p:last').next().remove()

//重置请求状态为true:允许用户请求

flag = true

})