Javascript 如何使用PHP数组制作HTML表格

我想让HTML表使用PHP数组

这是PHP端代码

function get_location_list()
{
    global $connect;

    $query = "select location
                  , SUBSTRING_INDEX(SUBSTRING_INDEX(location,'-',1),'-',-1) loc_a
                  , SUBSTRING_INDEX(SUBSTRING_INDEX(location,'-',2),'-',-1) loc_b
                  , SUBSTRING_INDEX(SUBSTRING_INDEX(location,'-',3),'-',-1) loc_c
               from stock_location
               where location> ''
           order by loc_a, loc_b * 1, loc_c * 1 limit 100";
    $result = mysql_query($query, $connect);
    $arr_result = array();

    while( $data = mysql_fetch_array( $result ) )
    {
        $arr_result[$data[loc_a]][] = $data[location];
    }

    echo json_encode( $arr_result );
}

此代码将数组发送到HTML端。数组值与此相同

"A1":["A1-1","A1-1-1","A1-1-2","A1-1-3","A1-1-4","A1-2-1","A1-2","A1-2-
2","A1-2-3","A1-2-4","A1-3-1","A1-3-2","A1-3","A1-3-3","A1-3-4","A1-4-
1","A1-4-2","A1-4-3","A1-4-4","A1-4","A1-5-1","A1-5-2","A1-5-3","A1-5-
4","A1-5"],
"A2":["A2-1","A2-1-1","A2-1-2","A2-1-3","A2-1-4","A2-2-1","A2-
2","A2-2-2","A2-2-3","A2-2-4","A2-3-1","A2-3-2","A2-3-3","A2-3","A2-3-
4","A2-4-1","A2-4-2","A2-4-3","A2-4","A2-4-4","A2-5-1","A2-5-2","A2-5-
3","A2-5-4","A2-5"],
"A3":["A3-1","A3-1-1","A3-1-2","A3-1-3","A3-1-4","A3-2-
1","A3-2","A3-2-2","A3-2-3","A3-2-4","A3-3-1","A3-3-2","A3-3-3","A3-3","A3-
3-4","A3-4-1","A3-4-2","A3-4-3","A3-4","A3-4-4","A3-5-1","A3-5-2","A3-5-
3","A3-5-4","A3-5"],
"A4":["A4-1","A4-1-1","A4-1-2","A4-1-3","A4-1-4","A4-2-
1","A4-2","A4-2-2","A4-2-3","A4-2-4","A4-3-1","A4-3-2","A4-3-3","A4-3","A4-
3-4","A4-4-1","A4-4-2","A4-4-3","A4-4","A4-4-4","A4-5-1","A4-5-2","A4-5-
3","A4-5-4","A4-5"]

这是HTML端。不同的文件，与PHP不同的文件

  <table class="table table-bordered">
      <thead>
        <tr>
            <th class="header_center" width=100>location</th>
            <th class="header_center" width=100>product</th>
            <th class="header_center" width=100>qty</th>
        </tr>
      </thead>

      <tbody id="table_contents">
      </tbody>
    </table>

我不确定问题出在Javascript还是HTML代码上。以上述格式显示表格需要进行哪些更改？

//代码在这里
/**
* https://stackoverflow.com/questions/48401981/how-to-make-html-table-use-php-array#
*/ 
var响应=”；
var table_header=$（“#table_header”）；
var table_body=$（“#table_body”）；
函数processResponse（resp）{
resp={'A1'：['A1-1'，'A1-2'，'A1-3'，'A2'：['A2-1'，'A2-2'，'A2-3'，'A2-4']}；
//在表格标题上工作
var列=”；
var columnNames=Object.keys（resp）；
var maxRow=0；//所以我们知道哪个键的行最长
for（var col=0；col对于（var row=0；row为什么需要发送json？为什么不直接从PHP发送HTML输出，而不是用JavaScript解析它？只是试着理解一下，因为你没有使用任何JS框架，手动执行，那么PHP会有更好的控制。丹麦语Hakim Khan提出了一个很好的建议，这里真的不需要JS/JQuery。此外您正在使用不推荐使用的mysql数据库命令。请使用mysqli（或PDO）。
    $.post("function.htm", { 
        template   : "IU00", 
        action     : "get_location_list",
    },

    function( response ){ 

         $("#table_contents").empty();

            obj = eval( "(" + response + ")" )

            for( var i=0; i < obj.length; i++ )
            {
                str = "<tr>";
                str += "<td>" + obj[i].location + "</td>";
                str += "<td>" + "</td>";
                str += "<td>" + "</td>";
                str += "</tr>";

                $("#table_contents").append(str);
            } 


    });

  __________ __________ __________ __________
 |location 1|location 2|location 3|location 4|
 |  A1-1-1  |  A2-1-1  |  A3-1-1  |  A4-1-1  |
 |  A1-1-2  |  A2-1-2  |  A3-1-2  |  A4-1-2  |
 |  A1-1-3  |  A2-1-3  |  A3-1-3  |  A4-1-3  |
 |  A1-1-4  |  A2-1-4  |  A3-1-4  |  A4-1-4  |
 |  A1-2-1  |  A2-2-1  |  A3-2-1  |  A4-2-1  |
 |  A1-2-2  |  A2-2-2  |  A3-2-2  |  A4-2-2  |
       .         .           .          .
       .         .           .          .
 |  A1-5-5  |  A2-5-5  |  A3-5-5  |  A4-5-5  |
 ---------------------------------------------