Question

我正在尝试使用jquery构建一个html表。我要使用的数据来自json文件。到现在为止，我每行使用一个特定的json文件。一世。即“adressen1.json”，“adressen2.json”等。

是否可以合并这些json文件？

创建行时，也会创建一个按钮。单击此按钮，此行的数据将显示在第二位。不幸的是，这对我不起作用。也许我错过了一些东西。

感谢您的支持。

以下是HTML代码：

<div id="area_test">
    <table class="testtable_head">
        <tr>
            <th> Button </th>   
            <th> Name </th>
            <th> PLZ </th>
            <th> Ort </th>
            <th> Land </th>
            <th> Referenz </th>
            <th> Gesperrt </th>
        </tr>
        <tbody class="testtable_body">
        </tbody>
    </table>
    <div id="json_2">

    </div>
</div>

这是jQuery代码和json文件：

$( document ).ready(function() {
    $.getJSON( "js/adressen1.json", function( data ) {
        $(".testtable_body").append("<tr><td><button id='test_1'>JSON</button></td><td>" + data.Name + "</td>   <td>" + data.postleitzahl + "</td><td>" + data.Ort + "</td><td>" + data.Land + "</td><td>" + data.Referenz +  "</td><td>" + data.Sperre + "</td></tr>");
    }); 

    $( "#test_1" ).click(function() {
    $.getJSON( "js/adressen1.json", function( data ) {
        $("#json_2").append(data.Vorname + " " + data.Name + "<br>" data.postleitzahl + " " + data.Ort);
    });
});

{
    "an": "Herrn",
    "Titel": "Dr.",
    "Vorname": "Klaus",
    "Name": "Meier",
    "Zusatz": "",
    "Strasse": "Goldstraße 56",
    "postleitzahl": "78966",
    "Ort": "Berlin",
    "Land": "DE",
    "Info": "",
    "Kurzname": "KM",
    "Sperre": "Offene Rechnung",
    "Referenz": ""
}

Answer 1

当然可以。只需将所有行添加到数组

[
    {"an": "Herrn", "Titel": "Dr."}, 

    {"an": "Herrn", "Titel": "Dr."}
]

使用循环处理数据

$.getJSON( "js/adressen1.json", function( data ) {
    var html = "";
    data.forEach(function(item, idx){
        html += "<tr><td><button data-id=" + idx+ ">JSON</button></td><td>" + data.Name + "</td>   <td>" + data.postleitzahl + "</td><td>" + data.Ort + "</td><td>" + data.Land + "</td><td>" + data.Referenz +  "</td><td>" + data.Sperre + "</td></tr>"    
    });
    $(".testtable_body")
        .append(html)
        .on('click', 'button[data-id]', function(){
            var item = data[$(this).data('id')];
            $("#json_2").append(item.Vorname + " " + item.Name + "<br>" item.postleitzahl + " " + item.Ort);
    });
});

使用jquery和json创建带有id的表

1 个答案: