Jquery mobile 在jQuery Mobile中将表绑定到数据

我使用jQuery Mobile和Icenium开发的混合应用程序的index.htm和main.js文件中有以下代码。我试图在HTML表中显示从对web服务的ajax调用中获得的JSON数据（对象数组）。在下面的jQuery代码中，保存这个JSON对象数组的变量称为“msg”

问题是，我在这个问题的末尾粘贴的表格中得到了扭曲的html如何确保输出正确且不扭曲？

index.html

 <div id="dataDiv" ><table bgcolor="aliceblue" id="employeesTable"></table></div>

main.js

                //bind the table
                //1.create column headings
                $("<thead><tr>").appendTo('#employeesTable');
                $('<th>#</th>').appendTo('#employeesTable');
                $.each(msg[0], function(key, val) {
                    $('<th>' + key + '</th>').appendTo('#employeesTable');
                });
                 $('<tr></thead><tbody>').appendTo('#employeesTable');
                //2.populate column data into appropriate cells

                $.each(msg, function(index, val) {
                    $('<tr>').appendTo('#employeesTable');
                    $('<td>' + (index + 1) + '</td>').appendTo('#employeesTable');
                    $.each(msg[index], function(key, val) {
                        $('<td id="' + key + '">' + val + '</td>').appendTo('#employeesTable');
                    });
                    $('</tr>').appendTo('#employeesTable');
                });
                  $('</tbody>').appendTo('#employeesTable');

//绑定表
//1.创建列标题
$（“”）。附录（“#employeesTable”）；
$（'#'）。附加到（'#employeesTable'）；
$.each（消息[0]，函数（键，值）{
$（''+键+''）。附加到（'#employeesTable'）；
});
$（''）。附于（'employeesTable'）；
//2.将列数据填充到适当的单元格中
$.each（消息、函数（索引、val）{
$（''）。附于（'employeesTable'）；
$（''+（索引+1）+''）。附录（'#employeesTable'）；
$.each（消息[索引]，函数（键，值）{
$（''+val+''）。附加到（'#employeesTable'）；
});
$（''）。附于（'employeesTable'）；
});
$（''）。附于（'employeesTable'）；

来自上述jQuery的倾斜输出

  <table bgcolor="aliceblue" id="employeesTable">
  <thead>
    <tr></tr>
  </thead>
 <th>#</th>
 <th>FirstName</th>
 <th>LastName</th>
 <th>Age</th>
 <th>YearsInJob</th>
 <th>IsManager</th>
 <tbody>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</tbody>
<td>1</td>
<td id="FirstName">Sunil</td>
<td id="LastName">Jha</td>
<td id="Age">28</td>
<td id="YearsInJob">6</td>
<td id="IsManager">true</td>
<td>2</td>
<td id="FirstName">Nikolay</td>
<td id="LastName">Rebello</td>
<td id="Age">35</td>
<td id="YearsInJob">6</td>
<td id="IsManager">true</td>
<td>3</td>
<td id="FirstName">Mike</td>
<td id="LastName">Newton</td>
<td id="Age">32</td>
<td id="YearsInJob">2</td>
<td id="IsManager">false</td>
<td>4</td>
<td id="FirstName">Paul</td>
<td id="LastName">Samath</td>
<td id="Age">24</td>
<td id="YearsInJob">2</td>
<td id="IsManager">false</td>
</table>

#
名字
姓氏
年龄
年薪
IsManager
1.
苏尼尔
杰哈
28
6.
真的
2.
尼古拉
雷贝洛
35
6.
真的
3.
迈克
牛顿
32
2.
假的
4.
保罗
萨尔纳特
24
2.
假的

您应该只向employeesTable追加thead和tbody元素，然后向thead和tbody追加所需的表行，最后向每行追加单元格

要做到这一点，只需将您正在创建的元素分配给一个变量，并且您需要向该变量添加一些元素。 然后，附加到这些变量，而不是employeesTable