主要是通过双重for循环来生成td和tr,最终形成表格
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
div{
width: 500px;
height: 300px;
margin:10px auto;
text-align: center;
/*background-color: lightgray;*/
}
input{
width: 200px;
height: 20px;
margin-left: 10px;
}
p:first-child{
padding-top: 30px;
}
button{
width: 80px;
height: 30px;
border: none;
background-color: gray;
color:#fff;
margin: 0px 30px:
}
</style>
</head>
<body>
<div>
<p>tle:<input type="text" name="title" ></p>
<p>cow:<input type="text" name="rows" ></p>
<p>col:<input type="text" name="cols"></p>
<p><button>print</button>
<button>reset</button> </p>
</div>
<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:eq(0)').on('click',function(){
$(':input').not('button').each(function(index,obj){
if($(obj).val().length == 0){
$(obj).after('<span style="color:red">title is null</span>')
setTimeout(function(){
$(obj).next().remove()
},1500)
return false
} else if(isNaN($('input:eq(1)').val())){
$('input:eq(1)').after('<span style="color:red"> cow must be num</span>')
setTimeout(function(){
$('input:eq(1)').next().remove()
},1500)
return false
} else if(isNaN($('input:eq(2)').val())){
$('input:eq(2)').after('<span style="color:red">col must be num</span>')
setTimeout(function(){
$('input:eq(2)').next().remove()
},1500)
return false
} else if($('input[name="rows"]').val() <= 0){
$('input:eq(1)').after('<span style="color:red">fail</span>')
setTimeout(function(){
$('input:eq(1)').next().remove()
},1500)
return false
} else if($('input[name="cols"]').val() <= 0){
$('input:eq(2)').after('<span style="color:red">fail</span>')
setTimeout(function(){
$('input:eq(2)').next().remove()
},1500)
return false
}
if(flag == true){
flag = false
$.get('https://www.llheng.com/img/php/table.php',
{
title:$('input[name="title"]').val(),
rows:$('input[name="rows"]').val(),
cols:$('input[name="cols"]').val()
},
function(data)
{
$('p:last').next().remove()
$('p:last').after(data)
})
}
})
})
$('button:eq(1)').on('click',function(){
$(':input').not('button').val('')
$(':input:first').focus()
$('p:last').next().remove()
flag = true
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
