0

jQueryを使用して、テーブル内にチェックボックス、ボタン、および2つの入力ボックスを動的に作成しようとしています。以下は私のjQueryコードで、要素を作成しますが、列を適切に作成しません。私は何が欠けていますか？

var contentTblOpen = "<table border='4'>";
        var contentTblClose = "</table>";
        var contentTrOpen = "<tr>";
        var contentTrClose = "</tr>";
        var contentTdOpen = "<td>";
        var contentTdClose = "</td>";


        $("#Quote" + id).after(

            contentTblOpen
        ).append(
            contentTrOpen
        ).append(
            contentTdOpen
        ).append(
        $(document.createElement("input")).attr({
            id: 'RL_' + rLCount + '__Delete'
        , name: 'RL[' + rLCount + '].Delete'
        , type: 'checkbox'
        , checked: false
        })
        .click(function (event) {
            var cbox = $(this)[0];
            alert(cbox.value);
        })
        ).append(
        $(document.createElement("input")).attr({
            id: 'Line' + rLCount
        , name: 'Line' + rLCount
        , value: 'Line' + rLCount
        , class: 'ClsrLButton'
        , type: 'button'
        })
        ).append(
            contentTdClose + contentTdOpen
        ).append(
        $(document.createElement("input")).attr({
            id: 'RL_' + rLCount + '__TextLine'
        , name: 'RL[' + rLCount + '].TextLine'
        , value: 'RL_' + rLCount + '__TextLine'
        , type: 'input'
        })
        ).append(
            contentTdClose + contentTdOpen
        ).append(
        $(document.createElement("input")).attr({
            id: 'RL_' + rLCount + '__Amount'
        , name: 'RL[' + rLCount + '].Amount'
        , value: 'RL[' + rLCount + '].Amount'
        , type: 'input'
        }).append(
            contentTdClose + contentTrClose + contentTblClose
        )
        );
4

2 に答える 2

1

一連の長い文字列を作成する代わりにappend(次のようなもの):

'<table><tr><td><input id="RL_0__Delete" name="RL[0].Delete" type="checkbox">...'

var newTable = contentTblOpen 
               + contentTrOpen
               + contentTdOpen
               + "<input " + "id='RL_" + rLCount + "__Delete'" + "type='checkbox' >"

この文字列を追加します。

ところで、DOM の操作は非常に遅いため、文字列を作成してすべてを一度に追加すると、数ミリ秒かかります。

于 2013-02-25T14:17:14.733 に答える
0

ここでの主な落とし穴は.append()、ブラウザーを呼び出すたびに有効な DOM が作成されることです。したがって、 a<tr>なしで aを挿入するとすぐに</tr>、ブラウザーは を挿入し</tr>、結果は有効な DOM になりますが、最初に意図したものにはなりません。

strah's answer をチェックしてください。役立つはずです。

于 2013-02-25T14:27:33.107 に答える