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

Question

テーブルのtbodyに行を追加しようとしています。しかし、私はそれを達成することに問題があります。まず、HTMLページからのドロップダウンの変更時に、すべてが実行される関数が呼び出されます。私はtr文字列を作成し、その中にhtmlの要素、テキストなどを含む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); 

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

Answer 1

！ o.O

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

この奇妙な問題が発生する理由は考えられません。Lodashで

Answer 2

("#tblEntAttributes tbody")

($("#tblEntAttributes tbody"))する必要があります。あなたは正しい構文で要素を選択していない

はここ@wireyがappendTo言ったように http://jsfiddle.net/xW4NZ/

Answer 3

作業

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

と

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

両方の例です翔uldの場合は、これを試すことができます：

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

Answer 4

ここで言及したhtmlドロップダウンを使用してappendToバージョンです。それは "変更"に別の行を挿入します。

あなたが遊ぶ例を挙げてください。運が良かった！私が今までこのような奇妙な問題に遭遇したことがありません

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

Answer 5

使用この

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

Answer 6

テンプレートを作成することができますし、道を、次のことを行うことができます。

<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