我想将Json Data显示到表中

Question

＆＃13;

＆＃13;

var $table = $('#table');
var mydata =
	[
		{
			"id": 0,
			"name": "test0",
			"price": "$0"
		},
		{
			"id": 1,
			"name": "test1",
			"price": "$1"
		},
		{
			"id": 2,
			"name": "test2",
			"price": "$2"
		},
		{
			"id": 3,
			"name": "test3",
			"price": "$3"
		},
		{
			"id": 4,
			"name": "test4",
			"price": "$4"
		},
		{
			"id": 5,
			"name": "test5",
			"price": "$5"
		},
		{
			"id": 6,
			"name": "test6",
			"price": "$6"
		},
		{
			"id": 7,
			"name": "test7",
			"price": "$7"
		},
		{
			"id": 8,
			"name": "test8",
			"price": "$8"
		},
		{
			"id": 9,
			"name": "test9",
			"price": "$9"
		},
		{
			"id": 10,
			"name": "test10",
			"price": "$10"
		},
		{
			"id": 11,
			"name": "test11",
			"price": "$11"
		},
		{
			"id": 12,
			"name": "test12",
			"price": "$12"
		},
		{
			"id": 13,
			"name": "test13",
			"price": "$13"
		},
		{
			"id": 14,
			"name": "test14",
			"price": "$14"
		},
		{
			"id": 15,
			"name": "test15",
			"price": "$15"
		},
		{
			"id": 16,
			"name": "test16",
			"price": "$16"
		},
		{
			"id": 17,
			"name": "test17",
			"price": "$17"
		},
		{
			"id": 18,
			"name": "test18",
			"price": "$18"
		},
		{
			"id": 19,
			"name": "test19",
			"price": "$19"
		},
		{
			"id": 20,
			"name": "test20",
			"price": "$20"
		}
	];

$(function () {
	$('#table').bootstrapTable({
		data: mydata
	});
	//console.log(mydata);
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>

<div class="container">
    <table id="table">
        <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我强烈建议您使用jQuery dataTable。

将任意 数组或 JSON 数据转换为HTML表格的简单插件

就像这样叫你datatable init

$(function () {
  $('#table').DataTable({ 
    ajax: {
      url: "../call/Mydata.php",  // will return the JSON as response
      type: 'GET'
    },
    columns: [
      { data: "users.id" },
      { data: "users.name" },
      { data: "users.price" }, 
    ]
  })
};

Answer 2

你的问题是什么？您的代码运行正常。 这是一个小提琴链接：
HTML：

<div class="container">
    <table id="table">
        <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

Working Fiddle

Answer 3

没有任何插件，你可以这样做

$.each(mydata,function(id,val){
   var tableData = "<tr>";
   $.each(val,function(column,value){

     tableData = tableData + "<td>"+ value +"</td>";

   });
   tableData = tableData+ "</tr>";
   $('#tableBody').append(tableData);
});

更改HTML表格并添加表格。

<table id="table">
<thead>
    <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
</thead>
<tbody id="tableBody">
<tbody>