Question

这是我编写表格的代码：

$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); 
$("#results").append("<tr><td>John</td><td>1231231234</td></tr>");
$("#results").append("</table>");

当我使用CSS对此表应用border时，它无法正确应用。
请参考这个小提琴：http://jsfiddle.net/23NQX/1/

我在这里做错了什么？

Answer 1

创建变量table ..向其添加<tr> ...并将最终table追加到结果

试试这个

 var table=$('<table>');
 table.append('<tr><th>Name</th><th>Phone Number</th></tr>');
 table.append("<tr><td>John</td><td>1231231234</td></tr>");

 $("#results").append(table);

更清晰可读。

append确实接受其他参数，所以你甚至可以做

 table.append('<tr><th>Name</th><th>Phone Number</th></tr>',"<tr><td>John</td><td>1231231234</td></tr>");

但我更愿意先去...

fiddle

Answer 2

如果您不自行关闭标记，附加未关闭的标记会自动关闭标记，因此在您的情况下，它将创建2个表格。所以把字符串放在一个附加中。

$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr><tr><td>John</td><td>1231231234</td></tr></table>");

DEMO

Answer 3

您必须先创建表格，然后将行追加到表格。

像这样：

$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr></table>"); 
$("#results > table").append("<tr><td>John</td><td>1231231234</td></tr>");

查看this fiddle

Answer 4

使用您的第一个附加创建表，然后附加到表

$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr></table>"); 
$("#results").children("table").append("<tr><td>John</td><td>1231231234</td></tr>");

Answer 5

我总觉得反过来思考问题会有所帮助：

// create the table
$("<table>")
  // append the header
  .append("<tr><th>Name</th><th>Phone Number</th></tr>")
  // append a row to the table
  .append("<tr><td>John</td><td>1231231234</td></tr>")
  // append the table to the DOM
  .appendTo($("#results"));

Here's a fiddle显示此功能可以根据需要使用，并且更易于阅读。

Answer 6

我建议您使用下一个结构：

$("#results").append($("<table>")
                .append($("<tr>")
                   .append($("<th>").html("Name"))
                   .append($("<th>").html("Phone Number"))
                )
              .append($("<tr>")
                   .append($("<td>").html("John"))
                   .append($("<td>").html("123123123"))
                )

)

易于修改和阅读。

DEMO：http://jsfiddle.net/23NQX/7/

Answer 7

一个简单的方法

$("#results").append("<table id='table'><tr><th>Name</th><th>Phone Number</th</tr></table>"); 
$("#table tr:last").after("<tr><td>John</td><td>1231231234</td></tr>");

Answer 8

$("#results").append("<table id='my_table' border='1'><tr><th>Name</th><th>Phone Number</th></tr></table>"); 
$("#my_table").append("<tr><td>John</td><td>1231231234</td></tr>");

jQuery .append（）没有按预期工作

8 个答案: