jquery 动态添加行后怎么得到行中的值
展开全部
<!doctype html>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
