Question

我有现有的表格，我想添加/追加tbody元素。这是我的HTML表的示例：

<div id="myDiv">
    <table class="myTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Last</th>
                <th>First</th>
                <th>DOB</th>
                <th>Nickname</th>
            </tr>
        </thead>
    </table>
</div>

这是我的JavaScript / JQuery代码：

var divID = $('#myDiv table.myTable');
var tbl = "<tbody>"; 
for(var i=0; i < numRecs; i++){
    var jsRec = obj.DATA[i];
    tbl += "<tr id='lookup_"+i+"'>";
    tbl += "<td>"+decodeURIComponent(jsRec.ID)+"</td>";
    tbl += "<td>"+decodeURIComponent(jsRec.LAST)+"</td>";
    tbl += "<td>"+decodeURIComponent(jsRec.FIRST)+"</td>";
    tbl += "<td>"+decodeURIComponent(jsRec.DOB)+"</td>";
    tbl += "<td>"+decodeURIComponent(jsRec.NICKNAME)+"</td></tr>";          
}
tbl += "</tbody>";
divID.append(tbl);
$.alert(divID,'Main Menu',1000,600); //JQuery dialog box that takes html variable, title, width and height

我在使用此代码的对话框中收到空白内容。如果有人可以提供帮助或查看我的代码在哪里，请告诉我。谢谢。

Answer 1

看起来你没有关闭循环中的<tr>，制作一系列开放式的表行。 jQuery在附加到DOM之前验证HTML，因此在尝试append时它可能会无声地失败。

Answer 2

我将以小块的形式分离元素的创建，如下例所示。这样一来，如果事情向南发展就会更容易分开。您可能只需要将props.update替换为sampleData[i]["id"]等。我仅为示例创建了sampleData数组。也可以在循环内对对象的每个属性执行decodeURIComponent(jsRec.ID)。

decodeURIComponent()

(function($) {
  $(document).ready(function() {
    var sampleData = [{
      id: 1,
      last: "lst",
      first: "first",
      DOB: "IDK",
      nickname: "nick"
    }];

    var divID = $('#myDiv table.myTable tbody');
    var current, row, cell;


    for (var i = 0; i < sampleData.length; i++) {
      row = $("<tr></tr>"); //Create a row
      cell = $("<td></td>").html(sampleData[i]["id"]); //Create a cell
      row.append(cell); //Append The cell
      cell = $("<td></td>").html(sampleData[i]["last"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["first"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["DOB"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["nickname"]);
      row.append(cell);
      divID.append(row); //Add Row to the Table
    }
  });

})(jQuery);

td,
th,
tr {
  border: 1px solid gray;
}

最后你可能遇到<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="myDiv"> <table class="myTable"> <thead> <tr> <th>ID</th> <th>Last</th> <th>First</th> <th>DOB</th> <th>Nickname</th> </tr> </thead> <tbody> </tbody> </table> </div>的问题，但你可能需要的只是添加一个toString（）或类似的东西。

将tr添加到div容器内现有表的tbody中？

2 个答案: