如何优化 jQuery html 建表代码？答案

【问题标题】：How to optimize the jQuery html table creation code?如何优化 jQuery html 建表代码？
【发布时间】：2017-07-18 22:44:46
【问题描述】：

我必须根据 div 中的数据比较报告动态添加表格。下面的代码实现相同。

jQuery 代码

$('#tblComparisonReportContent').append('<table border="1" width=\"50%\"><tr><td colspan="5" align="center">Project1</td></tr><tr><td colspan="3">Feb 12,2017 - Feb 18, 2017</td>" and so on

HTML 表格代码

这是模板，每个 TR -> TD 都是动态的

<!doctype html>
<html lang="en">
    <body>
        <table border="1" width="50%">
            <tr>
                <td colspan="5" align="center">Project 1</td>
            </tr>
            <tr>
                <td colspan="3">Feb 12,2017 - Feb 18, 2017</td>
                <td colspan="2">Feb 12,2017 - Feb 18, 2017</td>
            </tr>
            <tr>
                <td></td>
                <td>PASSED</td>
                <td>FAILED</td>
                <td>PASSED</td>
                <td>FAILED</td>
            </tr>
            <tr>
                <td>Env1</td>
                <td>83%</td>
                <td>17%</td>
                <td>88%</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Env2</td>
                <td>83%</td>
                <td>17%</td>
                <td>88%</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Env3</td>
                <td>83%</td>
                <td>17%</td>
                <td>88%</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Env4</td>
                <td>83%</td>
                <td>17%</td>
                <td>88%</td>
                <td>12</td>
            </tr>
            <tr>
                <td>Env5</td>
                <td>83%</td>
                <td>17%</td>
                <td>88%</td>
                <td>12</td>
            </tr>
        </table>
    </body>
</html>

需要解决方案协助：

我可以在 div 中添加带有动态值的表格。但是，这段代码看起来很难看，似乎没有经过优化。我是 jQuery 的新手。请求专家提出想法（从 jQuery 的角度）增强这一点，而不是将整个 HTML 传递给 append。

【问题讨论】：

在<tr> 和<td> 中使用循环怎么样？最初创建<table>，然后添加id。然后您可以使用循环将<tr> <td> 附加到您的表中。
谢谢。我试试看

标签： javascript jquery html

【解决方案1】：

只要 yopu 可以传递 json 数组并生成表格。我假设您知道如何将响应作为 json 传递。

HTML

<table border="1" width="50%" id="tblComparisonReportContent">
  <thead>
    <tr><td colspan="5">Project</td></tr>
  </thead>
  <tbody>
  </tbody>
</table>

php后端

$arrayTbl = array(''=>)
// you can create an array of values
$arrayjson = array('success' => true,'rows'=>array('projectname'=>'abc') );        
echo json_encode($arrayjson);

jquery 结束

<script type="text/javascript">
 data = {
   action: 'your_action',
 };

 jQuery.post( ajaxurl, data, function( response ) {
   response = JSON.parse(response);

   if(response.success) {
     var table = $("#tblComparisonReportContent tbody");

     $(response.row).each(function(val) {
       var tr = "<tr>";
       tr += "<td colspan=5>"+val.projectname+"</td>";
       tr += "</tr>";
       table.append(tr);
     });
   }
 });
 </script>

尝试从中获得想法，我没有测试代码，我想我对 json 有一个想法，只是循环你的 json 响应并在每个函数中构建你的表。

【讨论】：