Question

我目前正在使用一个项目，其中使用jQuery将查询发送到服务器，并且返回的响应是一个数组。然而，由于列数可能在查询之间不同，因此我无法将接收的数据发送到动态表。到目前为止，我有以下内容但似乎无法将数组解析到表中：

<script>
var my_array;
$.getJSON("sql_query.php", // The server URL 
    { id: "sewer_pipelines" },
    function(json) {
    my_array = json;
    });

function generate_table() {
    // Create a HTML Table element.
    var table = document.createElement("TABLE");
    table.border = "1";

    // Get a column count
    var column_count = my_array[0].length;

    // Add header row
    var row = table.insertRow(-1);
    // Creates a loop 
    for (var i = 0; i < column_count; i++) {
        row = table.insertRow(-1);
        for (var j = 0; j < column_count; j++);
            var cell = row.insertCell(-1);
            cell.innerHTML = my_array[i][j];
    }

    var array_table = document.getElementById("array_table");
    array_table.innerHTML = "";
    array_table.appendChild(table);
};
</script>

<html>
    <input type="button" value="Generate Table" onclick="generate_table()" />  
    <div id="array_table"></div>
</html>

返回的数组格式为：

[{"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"},
{"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"},
{"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"}]

将数组变量放到第二个函数中还是我在完全错误的轨道上？

Answer 1

当您使用jQuery时，您可以尝试这种方法：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<script>
  var my_array = [
   {"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"},
   {"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"},
   {"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"}
  ];

  function generate_table() {
    // Create a HTML Table element.
    var table = $("<table border='1'></table>");

    table.append($("<tr><th>GID</th><th>ID</th><th>Layer</th>"))
    for (var i = 0; i < my_array.length; i++) {
      table.append($("<tr><td>" + my_array[i]['gid'] + "</td><td>" + my_array[i]['id'] + "</td><td>" + my_array[i]['layer'] + "</td>"))
    }

    $("#array_table").html('')
    $("#array_table").append(table);
  };
</script>
<input type="button" value="Generate Table" onclick="generate_table()" />
<div id="array_table"></div>

</html>

Answer 2

在这里，我修复了你的代码。

<script>
      var my_array = [
          {"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"},
          {"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"},
          {"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"}
        ];
      var newArray = my_array.map((x) => [x.gid, x.id, x.layer]);
      console.log(newArray[0][1]);
      function generate_table()
      {
          // Create a HTML Table element.
          var table = document.createElement("TABLE");
          table.border = "1";

          // Get a column count
          var column_count = newArray[0].length;
          var row_count = newArray.length;
          // Add header row
          var row = table.insertRow(0);
          row.insertCell(-1).innerHTML = "gid";
          row.insertCell(-1).innerHTML = "id";
          row.insertCell(-1).innerHTML = "layer";
          // Creates a loop
          for (var i = 0; i < row_count; i++)
          {
              row = table.insertRow(table.rows.length);
              for(var j = 0; j < column_count; j++)
              {
                  var cell = row.insertCell(row.cells.length);
                  cell.innerHTML = newArray[i][j];
              }
          }

          var array_table = document.getElementById("array_table");
          array_table.innerHTML = "";
          array_table.appendChild(table);
      };
      </script>
    <input type="button" value="Generate Table" onclick="generate_table()" />
    <div id="array_table"></div>

Answer 3

＆＃13;

var response = [{
      "name":"john",
       "age":"6"
     },
     {
       "name":"jack",
       "age":"6"
    
    }];

$.each(response, function(i, item) {
    $('<tr>').html(
        "<td>" + response[i].name + "</td><td>" +                           response[i].age + "</td><td>"
        ).appendTo('#data');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data"></table>

＆＃13;

Jquery .getJSON（）数组作为表

3 个答案: