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ソースを変更しませんが、1つ（または複数）の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

最初の2つの呼び出しは、同じ要素（つまり、 ）.append()に追加されます。これを回避する1つの方法は、個別に作成してから、それに追加することです。<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 に答える