Question

我有一个json数据，我有一个html表，我想将json数据添加到表中这是我如何尝试获取json数据，我使用append来添加表数据，因为我是json解析的新手，我试过我最好的任何一个帮助......

<!DOCTYPE html>
<html>

<head>
    <title>JSON Demo</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function StudentDetails() {
            var stu = [{
                    "stuname": "anbu",
                    "studep": "cs"
                },
                {
                    "stuname": "raj",
                    "studep": "Maths"
                },
                {
                    "stuname": "mani",
                    "studep": "science"
                }
            ]

            var tr = "";
            for (var i = 0; i < stu.length; i++) {

                tr = $('<tr/>');
                tr.append("<td>" + stu.stuname + "</td>");
                tr.append("<td>" + stu.studep + "</td>");
                $('#student').append(tr);

            }
        }
    </script>
</head>

<body>
    <input type="button" onClick="StudentDetails()" value="Student Table" />
    <div>
        <table id="student">
            <thead>
                <tr>
                    <th>Student Name</th>
                    <th>Student Department</th>
                </tr>
                <thead>
                    <tbody></tbody>
        </table>
    </div>

    <div id="showData"></div>
</body>

</html>

Answer 1

将Array的索引添加到stu

tr.append("<td>" + stu[i].stuname + "</td>");
tr.append("<td>" + stu[i].studep + "</td>");

Answer 2

试试这个：

tr.append("<td>" + stu[i]['stuname'] + "</td>");

Answer 3

像这样更改你的代码

for (var i = 0; i < stu.length; i++) {
        var tr = $("<tr>");

        tr.append("<td>" + stu[i].stuname + "</td>" + "<td>" + stu[i].studep + "</td>")

        $("#student tbody").append(tr);
      }
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <title>JSON Demo</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <input type="button" onClick="StudentDetails()" value="Student Table" />
  <div>
    <table id="student">
      <thead>
        <tr>
          <th>Student Name</th>
          <th>Student Department</th>
        </tr>
        <thead>
          <tbody></tbody>
    </table>
  </div>


  <div id="showData"></div>
  <script>
    function StudentDetails() {
      var stu = [{
          "stuname": "anbu",
          "studep": "cs"
        },
        {
          "stuname": "raj",
          "studep": "Maths"
        },
        {
          "stuname": "mani",
          "studep": "science"
        }
      ]



      for (var i = 0; i < stu.length; i++) {
        var tr = $("<tr>");

        tr.append("<td>" + stu[i].stuname + "</td>" + "<td>" + stu[i].studep + "</td>")

        $("#student tbody").append(tr);
      }
    }
  </script>

</body>


</html>

＆＃13;

将JSON数据添加到Html表

3 个答案: