利用ajax给table赋值

litengfei0020 2014-03-20 03:29:52
我在前台有一个需求表 是一个十行五列的表格
我用ajax写入了数据库 ajax方法如下
function AddValue() {
var optvalArr = []; var data;
$(".Opints", "#Need").each(function (i, u) {
//取行中5个文本框的值
var a = $("input[name='uModel']", u).val();
var b = $("input[name='uArea']", u).val();
var c = $("input[name='uLeiXing']", u).val();
var d = $("input[name='uPingShu']", u).val();
var e = $("input[name='uSpec']", u).val();

optvalArr.push('{"Model":"' + a + '","Area":"' + b + '","LeiXing":"' + c + '","PingShu":"' + d + '","Spec":"' + e + '"}');
data = JSON.parse("[" + optvalArr.join(",") + "]");

});
GetArea(optvalArr);
}
function GetArea(optvalArr) {
$.ajax({
type: "post",
url: "tools/UserNeed.ashx",
data: "action=add&options=" + escape(optvalArr.join(",")) + "",
success: function (data) {
alert(datat);
}
})
}
表格如下图，依次循环十行就可以了
<div class="www_zzjs_net_show1" id="con_zzjs_1">
<table width="780" class="xqbd" border="1" align="center" cellpadding="5" cellspacing="0"
id="Need">

<tr class="Opints">
<td width="30" align="center">
<strong>10</strong>
</td>
<td width="150" align="center">
<label for="textfield">
</label>
<input type="text" name="uModel" value="" id="text41" />
</td>
<td width="150" align="center">
<input type="text" name="uArea" value="" id="text42" />
</td>
<td width="150" align="center">
<input type="text" name="uLeiXing" value="" id="text43" />
</td>
<td width="150" align="center">
<input type="text" name="uPingShu" value="" id="text44" />
</td>
<td width="150" align="center">
<input type="text" name="uSpec" value="" id="text45" />
</td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="submit" name="button" id="button" value="確認送出 " onclick="return AddValue();" />
<input type="reset" name="button2" id="button2" value="重填資料" />
</td>
</tr>
</table>
</div>
现在 在后台我要把他读出来 按照前台的顺序一次入到表格中 数据库中的数据如何下
{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"}

请教下 如何把这次数据一次赋值给表格？
...全文
804 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
litengfei0020 2014-03-21
  • 打赏
  • 举报
 回复
谢谢 已经解决了！
引用 2 楼 bdmh 的回复:
可以根据data的值，重新添加行，给table设置一个id，用js或jquery删除table内的行，然后再循环data添加行 http://blog.csdn.net/huchiwei/article/details/7872677
Go 旅城通票 2014-03-21
  • 打赏
  • 举报
 回复
var html = []; for (var i = 0; i < d.length; i++) html.push('<tr class="Opints"><td width="30" align="center"><strong>'+(i+1)+'</strong></td><td width="150" align="center"><label for="textfield"></label><input type="text" name="uModel" value="' + d[i].Model + '" id="text41" /></td><td width="150" align="center"><input type="text" name="uArea" value="' + d[i].Area + '" id="text42" /></td><td width="150" align="center"><input type="text" name="uLeiXing" value="' + d[i].LeiXing + '" id="text43" /></td><td width="150" align="center"><input type="text" name="uPingShu" value="' + d[i].PingShu + '" id="text44" /></td><td width="150" align="center"><input type="text" name="uSpec" value="' + d[i].Spec + '" id="text45" /></td></tr>'); $('#Need').prepend(html.join(''));
litengfei0020 2014-03-20
  • 打赏
  • 举报
 回复
请教下 我在这个表格的第一列还有一个数字索引、我该怎么显示出来呢
引用 1 楼 showbo 的回复:
ajax获取数据后组合成字符串插入表格就好了 注意不是所有浏览器都支持JSON对象，最好改为eval或者自己找个json2.js的类库 
    $(function () {
//d改为用ajax获取
        var d = '{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"}';
        //d = JSON.parse("[" + d + "]"); 
        d = eval("([" + d + "])"); //注意不是所有浏览器都支持JSON对象，最好eval
        var html = [];
        for (var i = 0; i < d.length; i++)
            html.push('<tr class="Opints"><td width="30" align="center"><strong>10</strong></td><td width="150" align="center"><label for="textfield"></label><input type="text" name="uModel" value="' + d[i].Model + '" id="text41" /></td><td width="150" align="center"><input type="text" name="uArea" value="' + d[i].Area + '" id="text42" /></td><td width="150" align="center"><input type="text" name="uLeiXing" value="' + d[i].LeiXing + '" id="text43" /></td><td width="150" align="center"><input type="text" name="uPingShu" value="' + d[i].PingShu + '" id="text44" /></td><td width="150" align="center"><input type="text" name="uSpec" value="' + d[i].Spec + '" id="text45" /></td></tr>');
        $('#Need').prepend(html.join(''));
    });
bdmh 2014-03-20
  • 打赏
  • 举报
 回复
可以根据data的值，重新添加行，给table设置一个id，用js或jquery删除table内的行，然后再循环data添加行 http://blog.csdn.net/huchiwei/article/details/7872677
Go 旅城通票 2014-03-20
  • 打赏
  • 举报
 回复
ajax获取数据后组合成字符串插入表格就好了 注意不是所有浏览器都支持JSON对象，最好改为eval或者自己找个json2.js的类库 
    $(function () {
//d改为用ajax获取
        var d = '{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"},{"Model":"李騰飛","Area":"灿灿","LeiXing":"韩寒","PingShu":"星星","Spec":"笑笑"}';
        //d = JSON.parse("[" + d + "]"); 
        d = eval("([" + d + "])"); //注意不是所有浏览器都支持JSON对象，最好eval
        var html = [];
        for (var i = 0; i < d.length; i++)
            html.push('<tr class="Opints"><td width="30" align="center"><strong>10</strong></td><td width="150" align="center"><label for="textfield"></label><input type="text" name="uModel" value="' + d[i].Model + '" id="text41" /></td><td width="150" align="center"><input type="text" name="uArea" value="' + d[i].Area + '" id="text42" /></td><td width="150" align="center"><input type="text" name="uLeiXing" value="' + d[i].LeiXing + '" id="text43" /></td><td width="150" align="center"><input type="text" name="uPingShu" value="' + d[i].PingShu + '" id="text44" /></td><td width="150" align="center"><input type="text" name="uSpec" value="' + d[i].Spec + '" id="text45" /></td></tr>');
        $('#Need').prepend(html.join(''));
    });
layui Ajax请求给下拉框赋值的实例
如下所示： <!DOCTYPE html> <html> <head> <title>排课设置<...content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">...link rel="stylesheet
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
主要介绍了jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签的相关资料,需要的朋友可以参考下
JSP中Ajax+Servlet极简实操入门
JSP中Ajax+Servlet极简实操入门，内容包括：IDEA环境下Servlet完整示例步骤一、IDEA环境下Servlet完整示例步骤二、IDEA环境下Servlet完整示例步骤三、IDEA环境下Servlet完整示例步骤四、ajax应用举例步骤一（实体类...
基于bootstrap前端公用js
公共ajax,动态bootstraptable生成,表单赋值,时间转换,单位转换 基于前端公用js功能
利用ajax赋值,利用ajax给table赋值解决办法
利用ajax给table赋值解决办法利用ajax给table赋值解决办法日期：2014-05-16　浏览次数：20632 次利用ajax给table赋值本帖最后由 litengfei0020 于 2014-03-20 15:30:54 编辑我在前台有一个需求表是一个十行五列的...
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章