JSON 变量到 HTML 表格形式答案

【问题标题】：JSON variable to HTML table formJSON 变量到 HTML 表格形式
【发布时间】：2017-07-31 22:06:14
【问题描述】：

我希望这样写我的结果：

但我得到的是这样的：

这是我的代码。正确的方法是什么？

<script>
    var myObj, x= "", y="";

    myObj={
        "Movie": ["Deadpool", "Xmen", "Hunger Games", "RoboCop", "LOTR", "Starwar"],
        "Rating": [ 8, 6, 7, 2, 8, 7 ]
    };

    document.write("<table border='1'>")
    document.write("<tr>")

    for (i in myObj.Movie)
    {
        document.write("<td width='80' >" + myObj.Movie[i] + "</td>");
    }

    for (i in myObj.Rating)
    {
        document.write("<td width='80' >" + myObj.Rating[i] + "</td>");
    }
    document.write("</tr>")
    document.write("</table>")
</script>

【问题讨论】：

标签： php json html-table

【解决方案1】：

document.write("<table border='1'>");
for (i in myObj.Movie) 
{
    document.write("<tr>");
    document.write("<td width='80' >"+myObj.Movie[i]+"</td>");
    document.write("<td width='80' >"+myObj.Rating[i]+"</td>");
    document.write("</tr>")
}
document.write("</table>");

【讨论】：

很高兴为您提供帮助...谢谢！

【解决方案2】：

试试这个。

<script>

var myObj, x= "" ,y="";

myObj={ 
    "Movie":["Deadpool", "Xmen", "Hunger Games" , "RoboCop" , "LOTR" ,"Starwar"],
    "Rating" : [ 8 , 6 , 7 , 2 , 8 , 7 ] 
};

document.write("<table border='1'>");
document.write("<tr>Moving<td></td><td>Rating</td></tr>");
for (i in myObj.Movie) 
{
    document.write("<tr>");
    document.write("<td width='80' >"+myObj.Movie[i]+"</td>");
    document.write("<td width='80' >"+myObj.Rating[i]+"</td>");
    document.write("</tr>")
}

document.write("</table>");

</script>

【讨论】：

谢谢！但是“电影”已经从边界移出，但其他工作正常。

【解决方案3】：

在document.write("<table border='1'>") 之后，尝试像这样添加th：

<tr>
    <th>Movie</th>
    <th>Rating</th>
</tr>

看起来像这样：

<table>
  <tr>
    <th>Movie</th>
    <th>Rating</th>
  </tr>
  <tr>
    <td>Batman</td>
    <td>9001</td>
  </tr>

然后你可以添加一些这样的 CSS 使其更易于阅读：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

CSS 来自 HTML Tables (W3Schools)。

【讨论】：

感谢您的解释！这对我来说很棒。

【解决方案4】：

试试这个：

<script>
    var myObj, x= "" ,y="";

    myObj={
        "Movie":["Deadpool", "Xmen", "Hunger Games" , "RoboCop" , "LOTR" ,"Starwar"],
        "Rating" : [ 8 , 6 , 7 , 2 , 8 , 7 ]
    };

    document.write("<table border='1'>")
    for (var i=0;i<myObj.Movie.length;i++)
    {
        document.write("<tr>");
        document.write("<td width='80' >"+myObj.Movie[i]+"</td>");
        document.write("<td width='80' >"+myObj.Rating[i]+"</td>");
        document.write("</tr>")
    }

    document.write("</table>")
</script>

【讨论】：

我之前也用过这个方法，但是写的不对。谢谢你给我看正确的:)