web-dev-qa-db-ja.com

jQueryを使用してテーブルのtbodyに行を追加する

テーブルのtbodyに行を追加しようとしています。しかし、私はそれを達成する上で問題を抱えています。まず、すべてが行われる関数は、htmlページからのドロップダウンの変更時に呼び出されます。 html要素、テキスト、その他のものを含むtrをすべて含むtd文字列を作成しました。しかし、生成された行をテーブルに追加しようとすると：

$(newRowContent).appendTo("#tblEntAttributes tbody");

エラーが発生しました。テーブルの名前はtblEntAttributesであり、tbodyに追加しようとしています。

実際のところ、jQueryはtblEntAttributesをhtml要素として取得できません。ただし、documemt.getElementById("tblEntAttributes");を使用してアクセスできます

テーブルのtbodyに行を追加することでこれを達成する方法はありますか。たぶんバイパスか何か。

コード全体は次のとおりです。

var newRowContent = "<tr><td><input type=\"checkbox\" id=\"" + chkboxId + "\" value=\"" + chkboxValue + "\"></td><td>" + displayName + "</td><td>" + logicalName + "</td><td>" + dataType + "</td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>";

$("#tblEntAttributes tbody").append(newRowContent);

私が言及するのを忘れていた1つのことは、このコードが書かれている関数は、実際にajax呼び出しの成功コールバック関数です。 document.getElementById("tblEntAttributes")を使用してテーブルにアクセスできますが、何らかの理由で$(#tblEntAttributes)が機能しないようです。

jquerydynamichtml-tablerows
68
Anupam

このような奇妙な問題に出会ったことはありません！ o.O

問題が何であったか知っていますか？ $は機能していません。私はjQuery("#tblEntAttributes tbody").append(newRowContent);のようなjQueryで同じコードを試しましたが、それは魅力のように動作します！

この奇妙な問題が発生する理由はわかりません！

14
Anupam

("#tblEntAttributes tbody")

する必要があります

$("#tblEntAttributes tbody")。

正しい構文の要素を選択していない

ここに両方の​​例があります

$(newRowContent).appendTo($("#tblEntAttributes"));

そして

$("#tblEntAttributes tbody").append(newRowContent);

作業中 http://jsfiddle.net/xW4NZ/

90
ᾠῗᵲᄐᶌ

これを使って

$("#tblEntAttributes tbody").append(newRowContent);
35
user3962745

@wireyがappendToが動作するはずだと言ったので、そうでない場合はこれを試すことができます：

$("#tblEntAttributes tbody").append(newRowContent);
3
thecodeparadox

これは、前述のHTMLドロップダウンを使用したappendToバージョンです。 「変更」に別の行を挿入します。

$('#dropdown').on( 'change', function(e) {
    $('#table').append('<tr><td>COL1</td><td>COL2</td></tr>');
});

あなたが遊ぶための例で。幸運を祈ります！

http://jsfiddle.net/xtHaF/12/

3
Andrew

Lodashを使用すると、テンプレートを作成でき、次のようにできます。

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <table id="tblEntAttributes" class="table">
                    <tbody>
                        <tr>
                            <td>
                                chkboxId
                            </td>
                            <td>
                               chkboxValue
                            </td>
                            <td>
                                displayName
                            </td>
                            <td>
                               logicalName
                            </td>
                            <td>
                                dataType
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary" id="test">appendTo</button>
            </div>
        </div>
     </div>

そしてここにjavascriptがあります：

        var count = 1;
        window.addEventListener('load', function () {
            var compiledRow = _.template("<tr><td><input type=\"checkbox\" id=\"<%= chkboxId %>\" value=\"<%= chkboxValue %>\"></td><td><%= displayName %></td><td><%= logicalName %></td><td><%= dataType %></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>");
            document.getElementById('test').addEventListener('click', function (e) {
                var ajaxData = { 'chkboxId': 'chkboxId-' + count, 'chkboxValue': 'chkboxValue-' + count, 'displayName': 'displayName-' + count, 'logicalName': 'logicalName-' + count, 'dataType': 'dataType-' + count };
                var tableRowData = compiledRow(ajaxData);
                $("#tblEntAttributes tbody").append(tableRowData);
                count++;
            });
        });

これは jsbin にあります

0
asmmahmud