<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实战:表格自动生成器</title>
<style type="text/css">
h3 {
color: green;
margin-left:40px;
}
button {
width: 80px;
height: 30px;
border: none;
background-color: green;
color:white;
margin-right: 30px;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<p><label>输入行:<input type="text" name="rows"></label></p>
<p><label>输入列:<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置行列</button></p>
<!-- <p><label>输入行:<input type="text" name="rows"></label></p>
<p><label>输入列:<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置行列</button></p> -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//创建请求标志,防止重复请求
var flag = true
$('button:first').on('click',function(){
// alert(0)验证代码
// 第一步：遍历并验证用户输入的信息
// $(选择器).each(对象索引，当前对象)
$(':input').not('button').each(function(index,obj){
// 非空判断
// alert($(obj).val())验证代码
if ($(obj).val().length==0){
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">不能为空</span>')
// 定时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return true
// 非数字判断
}else if (isNaN($(obj).val())){
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">必须为数字</span>')
// 定时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return true
} else if($(obj).val()<=0) {
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">必须大于零</span>')
// 定
//
// 时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return false
}
//第二点:处理用户的请求(Ajax实现)
if (flag == false) {
$.get(
//1.请求处理的脚本
'demo8.php',
//2.发送的请求参数
{
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
//3.请求成功的回调函数
function(data){
//先将上一次生成的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after('data')
//将请求标志设置为false,禁止重复请求
flag = false
})
}
})
})
</script>
</body>
</html>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战:表格自动生成器</title>
<style type="text/css">
h3 {
color: green;
margin-left:40px;
}
button {
width: 80px;
height: 30px;
border: none;
background-color: green;
color:white;
margin-right: 30px;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<p><label>输入行:<input type="text" name="rows"></label></p>
<p><label>输入列:<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置行列</button></p>
<!-- <p><label>输入行:<input type="text" name="rows"></label></p>
<p><label>输入列:<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置行列</button></p> -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//创建请求标志,防止重复请求
var flag = true
$('button:first').on('click',function(){
// alert(0)验证代码
// 第一步：遍历并验证用户输入的信息
// $(选择器).each(对象索引，当前对象)
$(':input').not('button').each(function(index,obj){
// 非空判断
// alert($(obj).val())验证代码
if ($(obj).val().length==0){
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">不能为空</span>')
// 定时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return true
// 非数字判断
}else if (isNaN($(obj).val())){
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">必须为数字</span>')
// 定时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return true
} else if($(obj).val()<=0) {
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">必须大于零</span>')
// 定
//
// 时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return false
}
//第二点:处理用户的请求(Ajax实现)
if (flag == false) {
$.get(
//1.请求处理的脚本
'demo8.php',
//2.发送的请求参数
{
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
//3.请求成功的回调函数
function(data){
//先将上一次生成的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after('data')
//将请求标志设置为false,禁止重复请求
flag = false
})
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战:表格自动生成器</title>
<style type="text/css">
h3 {
color: green;
margin-left:40px;
}
button {
width: 80px;
height: 30px;
border: none;
background-color: green;
color:white;
margin-right: 30px;
}
</style>
</head>
<body>
<h3>表格生成器</h3>
<p><label>输入行:<input type="text" name="rows"></label></p>
<p><label>输入列:<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置行列</button></p>
<!-- <p><label>输入行:<input type="text" name="rows"></label></p>
<p><label>输入列:<input type="text" name="cols"></label></p>
<p><button>生成表格</button><button>重置行列</button></p> -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//创建请求标志,防止重复请求
var flag = true
$('button:first').on('click',function(){
// alert(0)验证代码
// 第一步：遍历并验证用户输入的信息
// $(选择器).each(对象索引，当前对象)
$(':input').not('button').each(function(index,obj){
// 非空判断
// alert($(obj).val())验证代码
if ($(obj).val().length==0){
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">不能为空</span>')
// 定时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return true
// 非数字判断
}else if (isNaN($(obj).val())){
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">必须为数字</span>')
// 定时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return true
} else if($(obj).val()<=0) {
//在当前元素后面添加提示信息
$(obj).after('<span style="color:red">必须大于零</span>')
// 定
//
// 时器清空
setTimeout(function(){
$(obj).next().remove()
},1500)
return false
}
//第二点:处理用户的请求(Ajax实现)
if (flag == false) {
$.get(
//1.请求处理的脚本
'demo8.php',
//2.发送的请求参数
{
rows: $('input[name="rows"]').val(),
cols: $('input[name="cols"]').val()
},
//3.请求成功的回调函数
function(data){
//先将上一次生成的表格删除
$('p:last').next().remove()
//生成新的表格
$('p:last').after('data')
//将请求标志设置为false,禁止重复请求
flag = false
})
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
