Question

我想从JSON表达式生成一个简单的表。代码现在正在工作，但每当添加一行时，前一行都会被覆盖。我认为这一定是一个简单的错误，我找不到错误。（请注意，弹出警告框时，通过查看表会覆盖行）＆＃39; #test＆＃39; -div被认为是一个参考，因为一切都按照我的预期运作。

我是jQuery的新手，但之前我曾使用过html / js，所以我甚至不知道这是＆＃39;标准＆＃39;这样做的方式。如果您认为这是垃圾请告诉我/告诉我如何正确地做到这一点=）

以下是最小的工作示例：

<!DOCTYPE HTML>
<html lang="en-US">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" media="screen" href="style.css">
        <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">
            $(document).ready(function() {
                var rows = [{
                    "date": "2013-11-24",
                }, {
                    "date": "2013-11-25",
                }];
                $.each(rows, function(index, value) {
                    $('#myTable tbody').append(
                    $('tr').append(
                    $('td').text(value.date)));
                    alert(value.date);
                    $('#test').append(value.date + "<br/>");
                });


            }); //document.ready
        </script>
        <table id="myTable">
            <tbody>
                <tr>
                    <td>asdfasdfasdf</td>
                </tr>
            </tbody>
        </table>
        <div id="test"></div>
    </body>

</html>

Answer 1

你也有语法错误

$(document).ready(function () {
    var rows = [{
        "date": "2013-11-24",
    }, {
        "date": "2013-11-25",
    }];
    $.each(rows, function (index, value) {
        $('<tr />').append($('<td />',{
            text: value.date
        })).appendTo('#myTable tbody')
        $('#test').append(value.date + "<br/");
    });
});

演示：Fiddle

Answer 2

写：

$.each(rows, function (index, value) {
    $('#myTable tbody').append('<tr><td>' + value.date + '</td></tr>');
});

Fiddle here.

Answer 3

您必须按reverse顺序执行此操作才能满足您的需求。

$('<td></td>').appendTo($('<tr></tr>').appendTo($('#myTable tbody'))).text(value.date);

LIVE DEMO

Answer 4

您需要更改

$.each(rows, function(index, value) {
                    $('#myTable tbody').append(
                    $('tr').append(
                    $('td').text(value.date)));
                    alert(value.date);
                    $('#test').append(value.date + "<br/>");
                });

为：

$.each(rows, function (index, value) {
    $('#myTable tbody').append('<tr><td>' + value.date + '</td></tr>');
});

因为当你做某事时$('tr').append($('td').text(value.date))); jquery get all（所有这些都在你的html中，并且你的javascript代码没有生成）。并将其文本更改为value.date。这就是为什么你的第一个来自html的td从你的rows对象获得最后一个值。

jQuery向表中添加行：行被覆盖

4 个答案:

LIVE DEMO