追加格在表TD动态

Question

var $table = $('<table/>').addClass('commentbox'); 

$table.append('<tr><td>' + 'Comment Id:'+ '</td></tr>'); 

var $wrap = $('<div/>').attr('id', 'container'); 

var $in = $('<input type="button" value="Reply"/>').attr('id', 'reply'); 
$wrap.append($in); 
$table.append(
       $('<tr>') 
         .append($('<td>'), 
         $('<td>')) 
         ); 
     $table.append($wrap); 

我想里面TD 要添加的DIV ID容器，但我得到的html

<table> 
    <tbody> 
    <tr> 
     <td>Comment</td> 
    </tr> 
    <tr> 
     <td> 
     </td><td></td> 
    </tr> 
    <tbody> 
    <div id="container"> 
     <input type="button" value="Reply" id="reply"> 
    </div> 
</table> 

Answer 1

您需要的$wrap对象追加到<td>元素，而不是$table。

尝试这样的事情，而不是：

var $table = $('<table/>').addClass('commentbox'); 

$table.append('<tr><td>' + 'Comment Id:'+ '</td></tr>'); 

var $wrap = $('<div/>').attr('id', 'container'); 
var $in = $('<input type="button" value="Reply"/>').attr('id', 'reply'); 

$wrap.append($in); 

$table.append(
    $('<tr>').append($('<td>').append($wrap), $('<td>').html('hello')) 
); 

演示在这里：http://jsfiddle.net/umCDP/

Answer 2

你也可以直接使用JavaScript来创建HTML：

var table = document.createElement("table"); 

var tbody = document.createElement("tbody"); 
var tr_comment = document.createElement("tr"); 
var td_comment = document.createElement("td"); 
td_comment.appendChild(document.createTextNode("Comment")); 
tr_comment.appendChild(td); 
tbody.appendChild(tr_comment); 

var tr_container = document.createElement("tr"); 
var td_container = document.createElement("td"); 
var div_container = document.createElement("div"); 
div_container.setAttribute("id", "container"); 
var input = document.createElement("input"); 
input.setAttribute("type", "button"); 
input.setAttribute("value", "Reply"); 
input.setAttribute("id", "reply"); 
div_container.appendChild(input); 
td_container.appendChild(div_container); 
tr_container.appendChild(td_container); 
tbody.appendChild(tr_container); 

table.appendChild(tbody); 

使用JavaScript添加元素，应提高性能。

What is the most efficient way to create HTML elements using jQuery?

Answer 3

您需要附加到$（ '表TBODY'）。例如：

$('table tbody').append($('<tr><td>new row</td></tr>'));