JQuery问题.append

Question

在html中我有一个空表标记。

<table cellpadding="5" cellspacing="5" border="0" id="TableID" class='TableOne'>
</table>
<input id="btn" value="test" type="button" />

在jscript函数中，我在表中添加了一些初始行，其中一行包含另一个表。

$('#btn').click(function() {
  var html = '';
  html += "\
    <tr>\
      <td>Row1\
        <table>\
          <tr>\
            <td></td>\
          </tr>\
        </table>\
      </td>\
    </tr>\
    <tr>\
      <td>Row2</td>\
    </tr>";
  $('#TableID').html(html);                   
  var newhtml = "<tr><td>Row3</td></tr>";
  $('#TableID').append(newhtml);
});

...

.tableOne
{
  border: 3px solid black;    
}
.tableTwo
{
  border: 2px solid red;
}

执行此代码时....而不是看

ROW1 行2 ROW3

我们看到了

ROW1 ROW3 ROW2

第3行放在内部表中。不是我用id指定的表....我怎么能解决这个问题？

---

编辑：

我不确定这究竟是什么原因，但我找到了解决办法。

<table cellpadding="5" cellspacing="5" border="0" class='tableOne'>
  <tbody id="TableID"></tbody>
</table>
<input id="btn" value="test" type="button" />

...

$('#btn').click(function() {
  var html = '';
  html += "\
    <tr>\
      <td>Row1\
        <table>\
          <tr>\
            <td></td>\
          </tr>\
        </table>\
      </td>\
    </tr>\
    <tr>\
      <td>Row2</td>\
    </tr>";
  $('#TableID').html(html);                   
  var newhtml = "<tr><td>Row3</td></tr>";
  $('#TableID').append(newhtml);
});

...

http://jsfiddle.net/sjord010/U88fa/3/

Answer 1

试试这个而不是追加。

$('#TableID > tr:last').after(newhtml);

此answer还有更多有关此内容的信息。

Updated fiddle。

Answer 2

在评论的讨论中，我认为$.html只是不喜欢你在格式错误的HTML中传递它。无论如何，这是一个updated jsFiddle，我只是使用$.append并清理了一些空格。希望这可以帮助。为了后人的缘故，这里是相关的JS代码：

var html = '';
html += "<tr><td><table class='tableTwo'><tr><td>Row1</td></tr></table></td></tr>";

html += "<tr><td><table class='tableTwo'><tr><td>Row2</td></tr></table></td></tr>";

$('#TableID').append(html);
newhtml = "<tr><td>Row3</td></tr>";
$('#TableID').append(newhtml);