jQuery动态创建表格

时间:2025-03-15 08:21:25
<table>

    <thead>

        <th>序号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>地址</th>

    </thead>

    <tbody ></tbody>

</table>

 

现在要将后台返回的数据在前台用表格进行展示。

$.ajax({

    url: urls,

    data: datas,

    type: "post",

    dataType: "json",

    success: function(data) {

        //第一种方式:使用拼接html的方式;

        var html = "";

        for(var i in data){

            html += "<tr>";

            html += "<td> + data[i].order + </td>";

            html += "<td> + data[i].name + </td>";

            html += "<td> + data[i].sex + </td>";

            html += "<td> + data[i].address + </td>";

            html += "</tr>";

        }

        $("#myTbody").html(html);


    //第二种方式:使用动态创建dom对象的方式;

    for(var i in data){

        var html = $("<tr></tr>");

        ("<td> + data[i].order + </td>");

        ("<td> + data[i].name + </td>");

        ("<td> + data[i].sex + </td>");

        ("<td> + data[i].address + </td>");

        ("#myTbody");

    }

},
 error: function(e) {

     alert("error:" + e);

 }

});