問題與jQuery .append

在html中我有一個空的表標記。問題與jQuery .append

<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 行2

第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/

來源

2011-04-26 Steph

您是否關閉了最初的'

'標籤？ – 2011-04-26 22:45:45

在jsFiddle中鞭打了這個：http://jsfiddle.net/JimmySawczuk/bPwMg/，這裏發生的是同樣的問題嗎？從我所看到的情況來看，這是預期的行爲。 – 2011-04-26 22:50:00

是的，我確實關閉了我的初始表格標籤。我的代碼實際上比這更復雜，這是一個非常簡化的版本。從未見過jsFiddle之前，好工具。但這就是應該發生的事情......不是我的實際代碼中發生的事情。我會看看我能做些什麼來發布一些實際的代碼 – Steph 2011-04-26 22:53:51

回答

去關中和意見的討論，我認爲$.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);

來源

2011-04-27 01:11:17

啊！我明白了！很高興知道，以備將來參考。謝謝！ – Steph 2011-04-27 14:38:26