Row用jQuery向表添加了两次

Question

我想用jquery创建一个表。我的代码是这样的：

function showGrid(url, container, columns, page) {
    jQuery(container).empty();

    var tr = jQuery("<tr class=\"mobileGridHeader\"><tr>");

    var tdTotalRows = jQuery("<td>test</td>");
    jQuery(tr).append(tdTotalRows);

    var table = jQuery('<table class="mobileGrid"></table>');
    jQuery(table).append(tr);

    jQuery(container).append(table);
}

容器是页面上的div。问题是，tr被添加到容器两次，我不知道为什么。

这不只是一个浏览器错误，在Html中我可以看到代码两次。

<table class="mobileGrid">
   <tbody>
       <tr class="mobileGridHeader">
           <td>test</td>
       </tr>
       <tr>
           <td>test</td>
       </tr>
   </tbody>
</table>

奇怪的是，css类“mobileGridHeader”仅在第一行中添加。

Answer 1

您不会在创作中关闭tr代码，因此会创建2个元素。要解决此问题而不是此行：

var tr = jQuery("<tr class=\"mobileGridHeader\"><tr>");

使用此行（添加反斜杠）：

var tr = jQuery("<tr class=\"mobileGridHeader\"></tr>");

Answer 2

问题是你还没有关闭你的tr标签：

var tr = jQuery("<tr class=\"mobileGridHeader\"><tr>");
                                                ^^^^

需要：

var tr = jQuery("<tr class=\"mobileGridHeader\"></tr>");

甚至：

var tr = jQuery("<tr class=\"mobileGridHeader\">");

否则jQuery会自动关闭两个tr标签，创建两行。