Question

我正在尝试使用JQuery创建HTML。我有一个创建HTML表的JQuery脚本：

$('<table>').attr('cellspacing', '5').addClass('blocksTable')
        .append('<tbody><tr><td>Name</td>')
        .append('<td><input type="text" value="" name="textBlockNames" class="textField"/></td></tr>')

        .append('<tr><td>Locale</td>')
        .append('<td><input type="text" value="" name="textBlockLocales" class="textField"/></td></tr>')

        .append('<tr><td>Content</td>')
        .append('<td><input type="text" value="" name="textBlockContents" class="textField"/></td></tr></tbody>')

        .append('</table>')
        .appendTo($("#idParentBlocksTable"));

但表格是这样生成的：

<table class="blocksTable" cellspacing="5">
    <tbody>
        <tr>
            <td>Name</td>
        </tr>
        <tr>
            <td>Locale</td>
        </tr>
        <tr>
            <td>Content</td>
        </tr>
    </tbody>
    <td>
        <input class="textField" type="text" name="textBlockNames" value="">
    </td>
    <td>
        <input class="textField" type="text" name="textBlockLocales" value="">
    </td>
    <td>
        <input class="textField" type="text" name="textBlockContents" value="">
    </td>
</table>

虽然它应该像这样生成：

<table class="blocksTable" cellspacing="5">
    <tbody>
        <tr>
            <td> Name </td>
            <td>
                <input class="textField" type="text" name="textBlockNames" value="">
            </td>
        </tr>
        <tr>
            <td> Locale </td>
            <td>
                <input class="textField" type="text" name="textBlockLocales" value="">
            </td>
        </tr>
        <tr>
            <td> Content </td>
            <td>
                <input class="textField" type="text" name="textBlockContents" value="">
            </td>
        </tr>
    </tbody>
</table>

我在这里做错了什么？我不知道如何更清楚地解释这个问题，所以我在这里打字，因为系统不允许我提交问题。

Answer 1

当你打电话时

.append('<tbody><tr><td>Name</td>')

jQuery不会更改页面的HTML源代码，但会添加一个（或多个）DOM节点。因此，HTML会自动修复（此处行和单元格已关闭）

你应该做的是构建一些HTML字符串并附加它：

var html = '<tbody><tr><td>Name</td>'
html += '<td><input type="text" value="" name="tex"'...
...
html += '</tbody>';
$('<table>').attr('cellspacing', '5').addClass('blocksTable').append(html);

请注意，向DOM添加元素的代价很高。您应该更喜欢构建一个大的HTML字符串，并在附加许多小元素后附加一次。

Answer 2

当你这样做时，

.append('<tbody><tr><td>Name</td>')

它会附加到table，

当你这样做时，

.append('<td><input type="text" value="" name="textBlockNames" class="textField"/></td></tr>')

由于上下文仍然是td，

，它不会附加到table

你可以尝试做的是创建所有html一次并将它们附加在一起。

Answer 3

前两个调用.append()附加到相同的元素（即<table>）。解决这个问题的一种方法是分别创建<tbody>，然后附加到：

var $body = $('<tbody></tbody>').appendTo($('<table>').attr('cellspacing', '5').addClass('blocksTable'));
$body
    .append('<tr><td>Name</td>')
    .append('<td><input type="text" value="" name="textBlockNames" class="textField"/></td></tr>')

    //...etc.

JQuery创建HTML无法正常工作

3 个答案: