ajax异步获取数据后动态向表格中添加数据(行)

因为某些原因，项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面，网上找了半天都没有看到现成的，决定自己写个例子

1、HTML页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xx信息查询</title>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/ai/ai-lib.js"></script>
<script src="/js/cheat-order.js"></script>
</head>
<body>
<div class="main pusher">
<form class="ui form vertical segment form-search">
<div class="fields">
<div class="halfsixCl wide field js_query_date">
<label for="checkDate">预定截止日期</label>
<input name="checkDate" type="text" id="checkDate">
</div>
<div class="sixCl wide field">
<label>SEQ</label>
<input name="hotelSeq" id="hotelSeq" placeholder="" type="text">
</div>
<div class="sixCl wide field js_query_seq">
<label>订单号</label>
<input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder="">
</div>
<div class="sixCl wide field js_query_btype">
<label>排序字段</label>
<select name="sortFiled" id="sortFiled">
<option value="hotel_seq">酒店seq</option>
<option value="order_no">订单号</option>
<option value="cellid">cellid</option>
</select>
</div>
<div>
<label></label>
<input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/>
</div>
</div>
</form>
<div class="table-container">
<table class="ui nine column table celled table-result" id="table-result">
<thead>
<tr>
<th>hotelSeq</th>
<th>酒店名称</th>
<th>订单号</th>
<th>联系人手机号</th>
<th>预定时间</th>
<th>userId</th>
<th>cellid</th>
<th>gps定位城市</th>
<th>wifi定位城市</th>
<th>定位距离</th>
</tr>
</thead>
<tbody id="tbody-result">
</tbody>
</table>
</div>
</div>
</body>
</html>

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>xx信息查询</title>

    <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>

    <script type="text/javascript" src="/js/ai/ai-lib.js"></script>

    <script src="/js/cheat-order.js"></script>

</head>

<body>


<div class="main pusher">


<form class="ui form vertical segment form-search">


<div class="fields">


<div class="halfsixCl wide field js_query_date">


<label for="checkDate">预定截止日期</label>


<input name="checkDate" type="text" id="checkDate">


</div>
        &lt;div class="sixCl wide field"&gt;

            &lt;label&gt;SEQ&lt;/label&gt;

            &lt;input name="hotelSeq" id="hotelSeq" placeholder="" type="text"&gt;

        &lt;/div&gt;

        &lt;div class="sixCl wide field js_query_seq"&gt;

            &lt;label&gt;订单号&lt;/label&gt;

            &lt;input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder=""&gt;

        &lt;/div&gt;

        &lt;div class="sixCl wide field js_query_btype"&gt;

            &lt;label&gt;排序字段&lt;/label&gt;

            &lt;select name="sortFiled" id="sortFiled"&gt;

                &lt;option value="hotel_seq"&gt;酒店seq&lt;/option&gt;

                &lt;option value="order_no"&gt;订单号&lt;/option&gt;

                &lt;option value="cellid"&gt;cellid&lt;/option&gt;

            &lt;/select&gt;

        &lt;/div&gt;

        &lt;div&gt;

            &lt;label&gt;&lt;/label&gt;

            &lt;input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/form&gt;

&lt;div class="table-container"&gt;

    &lt;table class="ui nine column table celled table-result" id="table-result"&gt;

        &lt;thead&gt;

        &lt;tr&gt;

            &lt;th&gt;hotelSeq&lt;/th&gt;

            &lt;th&gt;酒店名称&lt;/th&gt;

            &lt;th&gt;订单号&lt;/th&gt;

            &lt;th&gt;联系人手机号&lt;/th&gt;

            &lt;th&gt;预定时间&lt;/th&gt;

            &lt;th&gt;userId&lt;/th&gt;

            &lt;th&gt;cellid&lt;/th&gt;

            &lt;th&gt;gps定位城市&lt;/th&gt;

            &lt;th&gt;wifi定位城市&lt;/th&gt;

            &lt;th&gt;定位距离&lt;/th&gt;

        &lt;/tr&gt;

        &lt;/thead&gt;

        &lt;tbody id="tbody-result"&gt;

        &lt;/tbody&gt;

    &lt;/table&gt;

&lt;/div&gt;


</div>


</body>


</html>

2、cheat-order.js

$(function () {
$('#btSearch').click(function () {
var checkDate = $('#checkDate').val();
var orderNo = $('#orderNo').val();
var sortFiled = $('#sortFiled').val();
var hotelSeq = $('#hotelSeq').val();
var tbody=window.document.getElementById("tbody-result");
$.ajax({
type: "post",
dataType: "json",
url: "ac/order/queryCheatOrder",
data: {
hotelSeq: hotelSeq,
orderNo: orderNo,
sortFiled: sortFiled,
checkDate: checkDate
},
success: function (msg) {
if (msg.ret) {
var str = "";
var data = msg.data;
for (i in data) {
str += "<tr>" +
"<td>" + data[i].hotel_seq + "</td>" +
"<td>" + data[i].hotel_name + "</td>" +
"<td>" + data[i].order_no + "</td>" +
"<td>" + data[i].user_phone + "</td>" +
"<td>" + data[i].create_time + "</td>" +
"<td>" + data[i].user_id + "</td>" +
"<td>" + data[i].cellid + "</td>" +
"<td>" + data[i].gps_city + "</td>" +
"<td>" + data[i].cell_city + "</td>" +
"<td>" + data[i].distance + "</td>" +
"</tr>";
}
tbody.innerHTML = str;
}
},
error: function () {
alert("查询失败")
}
});
});
});

$(function () {

    $('#btSearch').click(function () {

        var checkDate = $('#checkDate').val();

        var orderNo = $('#orderNo').val();

        var sortFiled = $('#sortFiled').val();

        var hotelSeq = $('#hotelSeq').val();

        var tbody=window.document.getElementById("tbody-result");
    $.ajax({

        type: "post",

        dataType: "json",

        url: "ac/order/queryCheatOrder",

        data: {

            hotelSeq: hotelSeq,

            orderNo: orderNo,

            sortFiled: sortFiled,

            checkDate: checkDate

        },

        success: function (msg) {

            if (msg.ret) {

                var str = "";

                var data = msg.data;

                for (i in data) {

                    str += "&lt;tr&gt;" +

                    "&lt;td&gt;" + data[i].hotel_seq + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].hotel_name + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].order_no + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].user_phone + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].create_time + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].user_id + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].cellid + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].gps_city + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].cell_city + "&lt;/td&gt;" +

                    "&lt;td&gt;" + data[i].distance + "&lt;/td&gt;" +

                    "&lt;/tr&gt;";

                }

                tbody.innerHTML = str;

            }

        },

        error: function () {

            alert("查询失败")

        }

    });

});


});

3、示例图

备注：css已经删除了，效果比上面示例图要差些

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明

ajax异步获取数据后动态向表格中添加数据(行)的更多相关文章

js如何实现动态在表格中添加标题和去掉标题？
js如何实现动态在表格中添加标题和去掉标题? 一.总结 1.通过table标签的createCaption(),deleteCaption()方法实现. document.getElementById ...
Java 动态向 JTable 中添加数据
import java.awt.Toolkit; import javax.swing.SwingUtilities; import javax.swing.UIManager; import jav ...
jQuery Ajax遍历表格，填充数据，将表格中的数据一条一条拼成Jason数组
$.ajax({ url: baseURL + "InvoiceSale/OnQuotaInvoiceSale", //点击核销单号时,点击核销时,交互的页面 ...
在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接
查看本章节查看作业目录需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
js如何实现动态的在表格中添加和删除行？（两种方法）
js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...
如何使用免费控件将Word表格中的数据导入到Excel中
我通常使用MS Excel来存储和处理大量数据,但有时候经常会碰到一个问题—我需要的数据存储在word表格中,而不是在Excel中,这样处理起来非常麻烦,尤其是在数据比较庞大的时候, 这时我迫切地需要 ...
ligerui_实际项目_003：form中添加数据，表格(grid)里面显示，最后将表格(grid)里的数据提交到servlet
实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序图片效果: 总结: //disp ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
利用java反射机制实现读取excel表格中的数据
如果直接把excel表格中的数据导入数据库,首先应该将excel中的数据读取出来. 为了实现代码重用,所以使用了Object,而最终的结果是要获取一个list如List<User>.Lis ...

随机推荐

比较C#中几种常见的复制字节数组方法的效率[转]
[原文链接] 在日常编程过程中,我们可能经常需要Copy各种数组,一般来说有以下几种常见的方法:Array.Copy,IList<T>.Copy,BinaryReader.ReadByte ...
C# 代码笔记_tuple元组
tuple元组: 赋值 List<Tuple<string, int>> cc = new List<Tuple<string, int>>() { n ...
使用Win7 64位旗舰版光盘映像安装Windows Home basic 64位操作系统
工作当中需要安装Windows home basic 64位操作系统,苦于手头没有该版本的安装光盘,也没时间下载其安装映像.因此,在现有资源“cn_windows_7_ultimate_with_sp ...
Harris角点检测原理详解
http://blog.csdn.net/lwzkiller/article/details/54633670 关于角点的应用在图像处理上比较广泛,如图像匹配(FPM特征点匹配).相机标定等.网上也有 ...
6-Java-C（无穷分数）
题目描述: 无穷的分数,有时会趋向于固定的数字. 请计算[图1.jpg]所示的无穷分数,要求四舍五入,精确到小数点后5位,小数位不足的补0. 请填写该浮点数,不能填写任何多余的内容. 正确算法: 此题 ...
struts2 针对类型转换出错的处理
在类型转换出错时,需要在页面上显示友好提示: 类型转换出错时,会抛出一个运行时异常,程序会根据建立的属性文件,显示相应的错误提示. 实现方法: 1)新建局部属性文件或者全局属性文件局部属性文件:放置 ...
$("[lay-id='demo'] tbody tr[data-index=0]") 查找某行layui table
$("[lay-id='demo'] tbody tr[data-index=0]")
Less简介及安装
CSS的短板作为前端学习者的我们或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向. 而 CSS 作为一门标记性语言,可能给初学者第一印象就是简单易懂,毫 ...
ubuntu apt-update NO_PUBKEY 40976EAF437D05B5 NO_PUBKEY 3B4FE6ACC0B21F32
Fetched 28.1 MB in 11s (2344 kB/s) W: GPG error: http://archive.canonical.com xenial Release: The fo ...
在vue中场景，循环行，点击当前行编辑数据
当前列表点击编辑,行变为编辑框. <Row style="color:#999;margin-bottom:11px"> <Row style="ma ...

ajax异步获取数据后动态向表格中添加数据(行)

ajax异步获取数据后动态向表格中添加数据(行)的更多相关文章

随机推荐

热门专题