<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="../script/jquery-1.10.2.js"></script>
<style type="text/css">
.container {
width: 99.6%
height: 99%
position: absolute
top: 0.5%
left: 0.2%
overflow: auto
border: 1px outset #d0efe5
border-radius: 5px
-moz-border-radius: 5px
-wekit-border-radius: 5px
background: #F5F5F5
-webkit-background-size: cover
-moz-background-size: cover
-o-background-size: cover
background-size: cover
}
.toolbar {
width: 99.6%
height: 40px
padding: 10px
}
.button, .button:visited {
background-color: #2981e4
display: inline-block
padding: 5px 10px 6px
color: #fff
font-size: 13px
font-weight: bold
line-height: 1
text-decoration: none
-moz-border-radius: 6px
-webkit-border-radius: 6px
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6)
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6)
text-shadow: 0 -1px 1px rgba(0,0,0,0.25)
border-bottom: 1px solid rgba(0,0,0,0.25)
position: relative
cursor: pointer
}
.button:hover {
background-color: #2575cf
color: #fff
}
.button:active {
top: 1px
}
.table {
width: 600px
border: solid #add9c0
border-width: 1px 0px 0px 1px
}
.table th, td {
line-height: 30px
border: solid #add9c0
border-width: 0px 1px 1px 0px
}
.table tr {
width: 100%
margin: 0 auto
border: none
overflow: hidden
color: #2981e4
font: normal 12px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans
}
.center {
text-align: center
}
.table input[type='text'] {
width: 120px
color: #333
padding: 4px 5px
border: 1px solid #e0ecff
border-radius: 2px
-o-border-radius: 2px
-moz-border-radius: 2px
-wekit-border-radius: 2px
box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-o-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-webkit-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
-moz-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2)
behavior: url(/PIE.htc)
}
.table input[type='text']:focus, .table input[type='text']:hover {
border: 1px solid #3aa2d0
outline: none
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
<a class="button" id="btnNew"> 新 增 </a>
<a class="button" id="btnGet"> 取 值 </a>
</div>
<table class="table center" id="userTable">
<tr>
<th>用户账户</th>
<th>角色名称</th>
<th>有效期</th>
</tr>
<tr>
<td>
<input type='text' name='account' value="Jerry">
</td>
<td>
<input type='text' name='role' value="系统管理员">
</td>
<td>
<input type='text' name='period' value="2016-12-31">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var newRow = "<tr class='new'><td><input type='text' name='account'></td><td><input type='text' name='role'></td><td><input type='text' name='period'></td></tr>"
$("#btnNew").click(function() {
$("#userTable").append(newRow)
})
$("#btnGet").click(function() {
var datas = new Array()
$("#userTable").find("tr.new").each(function(){
datas.push({
"account" : $(this).find("input[name='account']").val(),
"role" : $(this).find("input[name='role']").val(),
"period" : $(this).find("input[name='period']").val()
})
})
alert(JSON.stringify(datas))
})
</script>
</body>
</html>
确保每个控件有个name属性，相同列的name属性值要相同，例如：name="xxx[]"，php的话要把每一列的值作为数组传给后台程序，然后把table放在一个form中，比较简单的思路就是这样了，当然也可以用ajax传json给后台，还有推荐使用jquery，原生js写得真是蛋疼啊。。。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）