如何使用json/jquery中的数据创建表？

Question

如何使用json/jquery中的数据创建表？

我想创建一个包含json数据的表,我应该修改我的jquery代码,以便能够创建包含数据或其他内容的行(仅修改我的json,css？...)

我需要使用我的数据水平创建一个表,此时我的<th>标签显示为内联,css为行,但使用json导入的数据垂直放在一列中.

jQuery的:

$(document).ready(function() {
    $.ajax({
        url: 'weather.json',
        type: 'GET',
        dataType: 'json', // Returns JSON
        success: function(response) {
            var sTxt = '';
            $.each(response, function(index, weatherElement) {
                sTxt += '<tr><td>' +  weatherElement.city+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.current_condition+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.temperature+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.wind_speed+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.wind_direction+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.wind_chill_factor+'</td></tr>';
            });
            $('#weatherlist').append(sTxt);
        },
        error: function() {
            $('#info').html('<p>An error has occurred</p>');
        }
    });
});

Run Code Online (Sandbox Code Playgroud)

HTML:

    <!DOCTYPE html>
    <html>

    <head>
        <title>Ajax and json Data</title>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="weather.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

        <body>
            <header>
                <h1>British and Irish Counties - Weather Data</h1>
            </header>
            <section>
                <table id="weatherlist">
                    <tr>
                        <th>City</th>
                        <th>Conditions</th>
                        <th>Temperature</th>
                        <th>Wind Speed</th>
                        <th>Wind Direction</th>
                        <th>Wind Chill Factor</th>
                    </tr>
                </table>
                <div id="updatemessage"></div>
                <p id="info"></p>
            </section>
            <footer>
            </footer>
        </body>

        </html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Hau*_*Haf 5

您的表行格式不正确.您应该将所有td元素包装在单个tr元素中.

改变这个:

sTxt += '<tr><td>' +  weatherElement.city+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.current_condition+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.temperature+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.wind_speed+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.wind_direction+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.wind_chill_factor+'</td></tr>';

Run Code Online (Sandbox Code Playgroud)

对此:

sTxt += '<tr>';
sTxt += '<td>' +  weatherElement.city+'</td>';
sTxt += '<td>' +  weatherElement.current_condition+'</td>';
sTxt += '<td>' +  weatherElement.temperature+'</td>';
sTxt += '<td>' +  weatherElement.wind_speed+'</td>';
sTxt += '<td>' +  weatherElement.wind_direction+'</td>';
sTxt += '<td>' +  weatherElement.wind_chill_factor+'</td>';
sTxt += '</tr>';

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	1028 次
最近记录：	9 年，7 月前