0

我正在尝试使用 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>

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

4

3 回答 3

4

当你打电话时

.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 字符串并附加一次，而不是附加许多小元素。

于 2012-11-28T12:02:34.600 回答
0

当你做一个，

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

它被附加到table,

当你这样做时，

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

它不会附加到td上下文仍然存在的情况下table，

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

于 2012-11-28T12:07:59.400 回答
0

前两个调用.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.
于 2012-11-28T12:08:15.897 回答