Question

这是我向表中添加行的代码

for(var i=0;i<subjects.length;i++){
    $('#table-wrapper table').append("<tr><td data-subjectid="+i+">"+subjects[i].name+"</td>");
    for(var j=0;j<no_of_batches;j++){
            $('#table-wrapper table').append("<td data-batchid="+j+"></td>");
    }
    $('#table-wrapper table').append("</tr>");
}

这产生的输出是

<table> 
    <tbody>
       <tr>
         <tr>
           <td data-subjectid="2">DBMS</td>
         </tr>
     </tbody>
        <td data-batchid="0"></td>
        <td data-batchid="1"></td>
        <td data-batchid="2"></td>
        <td data-batchid="3"></td>
 </table>

为什么内部<td>不会附加到表格末尾的<tr>标记，而是附加在<tbody>

之外

Answer 1

你需要这样做 -

for(var i=0;i<subjects.length;i++){
    var $tr = $('<tr></tr>');
    $tr.append("<td data-subjectid="+i+">"+subjects[i].name+"</td>");
    for(var j=0;j<no_of_batches;j++){
            $tr.append("<td data-batchid="+j+"></td>");
    }
    $('#table-wrapper table').append($tr);
}

Answer 2

您将通过

附加到表格中

$('#table-wrapper table').append("<td data-batchid="+j+"></td>");

需要附加到最后一个

$('#table-wrapper table tr:last-child').append("<td data-batchid="+j+"></td>");

尚未测试但应该可以正常使用

更好的方法是将内容添加到字符串然后追加一次

var temp;
for(var i=0;i<subjects.length;i++){
    temp = "<tr><td data-subjectid="+i+">"+subjects[i].name+"</td>";
    for(var j=0;j<no_of_batches;j++){
            temp = temp + "<td data-batchid="+j+"></td>";
    }
    temp = temp + "</tr>"
}
$('#table-wrapper table tbody').append(temp);

Answer 3

如果我理解你的代码是正确的，你可以尝试这样：

var table = $('#table-wrapper table');
for(var i = 0; i < subjects.length; i++) {
    var row = $('<tr />');
    row.append("<td data-subjectid=" + i + ">" + subjects[i].name + "</td>");
    for(var j = 0; j < no_of_batches; j++) {
        row.append("<td data-batchid=" + j + "></td>");
    }
    table.append(row);
}

在那里你创建一个行，向它附加单元格，然后在它向表中添加新行。您可能还希望缓存对表的引用。

Answer 4

append方法不是writeln等效方法。它实际上试图对文本进行分区并生成最终的完整标记。

使用临时字符串变量来累积您想要追加的所有内容，并在结尾处只调用append一次。

var s;
for(var i=0;i<subjects.length;i++){
  s = "<tr><td data-subjectid="+i+">"+subjects[i].name+"</td>";
  for(var j=0;j<no_of_batches;j++){
    s += "<td data-batchid="+j+"></td>";
  }
  s += "</tr>";
  $('#table-wrapper table').append(s);
}

使用jQuery附加到表中

4 个答案: