Question

我需要从JSON对象动态地将数据附加到表中。在将标题添加为元素后，我发现很难在与相应的元素相同的列中添加td元素。请帮帮我。

{
"Category2":"Item2",
"Category1":"Item1",
"Category3":"Item3"
}

<table>
   <th>Category1</th>
   <th>Category2</th>
   <th>Category3</th>
</table>

现在，我需要在与其对应元素相同的列中的td标记中添加项目。像：

    <table>
       <th>Category1</th>
       <th>Category2</th>
       <th>Category3</th>
       <td>Item1</td>
       <td>Item2</td>
       <td>Item3</td>
    </table>

如何使用jQuery执行此操作？（我的问题比这更大。我简化了它以便可以理解。谢谢！）

Answer 1

在这里，按Run code snippet并检查这是否适合您。

var nodes = {
"Category2":"Item2",
"Category1":"Item1",
"Category3":"Item3"
};

$(function(){
    var th_elements = $('table').find('th'); // find <th> in HTML
    th_elements.each(function(){             // Loop as much <th> found
       var html = $.trim($(this).html());    // get HTML and compare with nodes key
       $('table').append('<td>'+nodes[html]+'</td>'); // append data to table
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <table>
       <th>Category1</th>
       <th>Category2</th>
       <th>Category3</th>
 </table>

如何在表的第th个元素的同一列中追加td元素？

1 个答案: