JS动态添加tr,td标签

         <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过期');
                    }
                });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容