美文网首页
JS动态添加tr,td标签

JS动态添加tr,td标签

作者: 叫我小码哥 | 来源:发表于2019-04-28 09:08 被阅读0次
         <table>
                <tr class="head">                   
                    <th>订单号</th>
                    <th>姓名</th>
                    <th>房子地址</th>                   
                    <th>出售人姓名</th>
                    <th>出售人联系方式</th>
                    <th>订单状态</th>
                    <th>下单时间</th>
                    <th>支付</th>
                    <th>取消</th>
                </tr>
                <tbody id="tBody"></tbody>                  
            </table>
$.ajax({
                    url: 'http://127.0.0.1:8080/renting/order/getOrder',
                    data: {
                    },
                    type: "get",
                    async: false,               
                    dataType: "jsonp",
                    jsonpCallback: "foo100",
                    success: function (data) {                      
                        console.log(data);
                        if(data.status == 'failer'){
                            alert('订单为空');
                        }else{
                            $.each(data, function(index, obj) {
                                var tr;                                                     
                                tr = `<td>${obj.orders.orderNumber}</td>
                                <td>${obj.orders.userName}</td>
                                <td>${obj.orders.houseUnit}</td>
                                <td>${obj.orders.sellerName}</td>
                                <td>${obj.orders.sellerPhone}</td>
                                <td>${obj.orders.orderStatus}</td>
                                <td>${obj.orders.crreateTime}</td>
                                <td><a href="#" id=${obj.orders.orderNumber} onclick="payOrder(this);">支付</a></td>
                                <td><a href="#" id=${obj.orders.orderNumber} onclick="cancleOrder(this);">取消</a></td>`
                                $("#tBody").append('<tr>'+tr+'</tr>');
                            
                            });
                        }
                        
                    },
                    error: function () {
                        alert('seesion过期');
                    }
                });

相关文章

  • JS动态添加tr,td标签

  • DOM操作

    js动态添加 动态添加标签 var domDiv = document.createElement('div');...

  • vue2 基础学习06 (Vue组件:使用组件的细节点)

    一.使用is解决标签渲染中的小bug 1.如下代码,将表格中的组件化 运行结果...

  • HTML表格

    1、table标签:声明一个表格 2、tr标签:定义表格中的一行(tr中可以编写一个或多个th或td) 3、td和...

  • HTML基础——表格标签

    什么是表格标签 作用:给一堆数据添加表格语义 格式 table标签表示一个表格,tr标签表示一行,td标签表示一列...

  • 前端charts常用小结

    图表插件 jquery插件使用举例: json数组 JS遍历json对象 或者 通过JS动态添加table的tr,...

  • 一、JS动态添加节点

    一、JS动态添加节点 1、创建节点为变量:vartr=document.createElement('tr...

  • 表格与表单

    表格 table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单...

  • 表格与表单

    表格 table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单...

  • 表格与表单

    表格 table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单...

网友评论

      本文标题:JS动态添加tr,td标签

      本文链接:https://www.haomeiwen.com/subject/pcmrnqtx.html