如何使用jquery以表格格式动态显示json数据?

时间:2022-06-04 20:12:34

I have json data like this

我有这样的json数据

{
    Qty:[61.0,0.0,8.0],
    Name:["2009 A","2009 B","2009 C "]
}

and I have to display it in tabular format in html such that all the three elements should be displayed in different rows of the table.It should also be able to contain single name and qty respectively and multiple too (if needed ). Any help would be appreciated in this regard.

我必须在html中以表格格式显示它,以便所有三个元素都应该显示在表的不同行中。它还应该能够分别包含单个名称和数量以及多个(如果需要)。在这方面,任何帮助都将受到赞赏。

1 个解决方案

#1


1  

You can see below code how it iterate through $.each loop

您可以在下面看到代码如何迭代$ .each循环

$(document).ready(function (e) {
        var t = { Qty: [61.0, 0.0, 8.0], Name: ["2009 A", "2009 B", "2009 C "] }
        $.each(t.Qty, function (i, ele) {
            $("#content").append("<tr><td><input type='checkbox' /></td><td>" + parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>");
        })
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Select </th>
            <th>Qty</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody id="content">
    </tbody>
</table>
	

#1


1  

You can see below code how it iterate through $.each loop

您可以在下面看到代码如何迭代$ .each循环

$(document).ready(function (e) {
        var t = { Qty: [61.0, 0.0, 8.0], Name: ["2009 A", "2009 B", "2009 C "] }
        $.each(t.Qty, function (i, ele) {
            $("#content").append("<tr><td><input type='checkbox' /></td><td>" + parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>");
        })
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Select </th>
            <th>Qty</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody id="content">
    </tbody>
</table>