62,052
社区成员
发帖
与我相关
我的任务
分享一个JQuery动态生成的input表单，我不知道怎么在后台获取Value值然后提交数据库。
在网上找了个JQuery表格，可以动态在单元格中生成input表单，可是我不知道怎么在后台获取每个input的value值，瞎了。。。
先上代码
我想在这句话中
给每一个动态生成的input加上唯一的id和runat="server"，再去后台获取值，但貌似我太天真了。。。
案例效果在这里
http://www.0917mzf.com/jquery/demo.html
先上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery表格可编辑修改表格里面的数值</title>
<meta name="description" content="jquery表格特效制作jquery表格可编辑任意修改里面的数值，是一种比较人性化的用户设计体验方式。jquery下载。" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('table td').click(function () {
if (!$(this).is('.input')) {
$(this).addClass('input').html('<input id="a" type="text" value="' + $(this).text() + '" />').find('input').focus().blur(function () {
$(this).parent().removeClass('input').html($(this).val() || 0);
});
}
}).hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
</script>
<style type="text/css">
/* page styles */
body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}
table{border-collapse:collapse;}
td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;}
caption{margin:0 0 .5em;font-weight:bold;}
/*demo styles*/
table{width:500px;height:200px;margin-left:30px;}
td, th{font-size:1.2em;padding:2px;width:13%;}
th{background-color:#f4f4f4;}
caption{font-size:1.5em;}
table{float:left;margin:40px 40px 0 0;}
.demo{width:500px;margin:0 auto;}
/* input */
td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;padding:8px 0;text-align:center;width:60px;margin:-17px 0 0 4px;font-size:1.4em;}
td.input{ padding:0;position:relative;}
td.hover{background:#eee;}
</style>
</head>
<body>
<div class="demo">
<table>
<caption>2009年员工产品销售走势图</caption>
<thead>
<tr>
<td></td>
<th scope="col" >food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
<tr>
<th scope="row">Brad</th>
<td>10</td>
<td>180</td>
<td>10</td>
<td>85</td>
<td>25</td>
<td>79</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>40</td>
<td>80</td>
<td>90</td>
<td>25</td>
<td>15</td>
<td>119</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
我想在这句话中
$(this).addClass('input').html('<input id="a" type="text" value="' + $(this).text() + '" />')给每一个动态生成的input加上唯一的id和runat="server"，再去后台获取值，但貌似我太天真了。。。
案例效果在这里
http://www.0917mzf.com/jquery/demo.html
...全文
请发表友善的回复…
发表回复
娃都会打酱油了 2015-06-10
- 打赏
- 举报
你就按二楼来吧，一样的意思，给td加name，然后submit
爱_逆光 2015-06-10
- 打赏
- 举报
大哥，你说的嘛意思，没懂啊。。。。
nitaiyoucala 2015-06-10
- 打赏
- 举报
加个name属性，然后jquery each遍历table的行
类似下面这样：
$("#table tr").each(function (i) {
var v_test= $(this).find("td[name='name_test']").text();
});
娃都会打酱油了 2015-06-10
- 打赏
- 举报
加runat=server的确是天真了……
你如果是批量提交，那最好先将table的值遍历然后动态生成用于submit的input
爱_逆光 2015-06-10
- 打赏
- 举报
浅显的知道他是让前端标签变为服务器端控件。对于这个案例我大概知道用jquery的val()方法取值，可是。。。。我还在研究中。。。。。
於黾 2015-06-10
- 打赏
- 举报
知道runat=server是干啥用的不?
并不是什么控件加上这个都能在后台取到值的
爱_逆光 2015-06-10
- 打赏
- 举报
我试一下，把二楼的和你的结合一下看看能成功不
moonwrite 2015-06-10
- 打赏
- 举报
页面提交 不认input的id的 是认input的 name属性
<input name="a">
在后台可以用Request.Param["a"]来获取
