使用ajax,jq克隆动态生成表格

来源：互联网发布：笔记本win10系统优化编辑：程序博客网时间：2024/05/20 20:19
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="css/plugins/bootstrap.min.css">    <script src="js/plugins/jquery-2.1.4.min.js"></script>    <script src="js/plugins/bootstrap.min.js"></script></head><body><div class="box"><table class="table table-bordered table-hover table-striped" id="mytable">   <thead>   <tr>       <th>id</th>       <th>createdTime</th>       <th>name</th>       <th>tradeId</th>       <th>tradeCategoryId</th>       <th>imageNumber</th>       <th>isDeleted</th>       <th>tradeName</th>       <th>tradeCategoryName</th>       <th>unitCount</th>       <th>unitPackageCount</th>       <th>packageSpecificationCount</th>       <th>productParameterCount</th>   </tr>   </thead>    <tbody class="data-body">    </tbody></table></div><script>    $(function () {        $.ajax({            url: 'data.json',            type: 'GET',            dataType: 'json',            timeout: 1000,            cache: false,            beforeSend: LoadFunction, //加载执行方法            error: erryFunction,  //错误执行方法            success: succFunction //成功执行方法        })        function LoadFunction() {            $("#list").html('加载中...');        }        function erryFunction() {            alert("error");        }        function succFunction(msg) {            $(".data-body").empty()            var datas=msg.data.content;           for (var i=0;i<datas.length;i++){                var $tr = $("<tr class='center'></tr>");                var $td = $("<td></td>");                $tr.append($td.clone().text(datas[i].id));                $tr.append($td.clone().text(datas[i].createdTime));                $tr.append($td.clone().text(datas[i].name));                $tr.append($td.clone().text(datas[i].tradeId));                $tr.append($td.clone().text(datas[i].tradeCategoryId));                $tr.append($td.clone().text(datas[i].imageNumber));                $tr.append($td.clone().text(datas[i].isDeleted));                $tr.append($td.clone().text(datas[i].tradeName));                $tr.append($td.clone().text(datas[i].tradeCategoryName));                $tr.append($td.clone().text(datas[i].unitCount));                $tr.append($td.clone().text(datas[i].unitPackageCount));                $tr.append($td.clone().text(datas[i].packageSpecificationCount));               $tr.append($td.clone().text(datas[i].productParameterCount));                $tr.appendTo($(".data-body"));            }        }    });</script></body></html>
0 0