Hinzufügen von Zeilen zu tbody einer Tabelle mit jQuery

Question

Ich versuche, Zeilen zu tbody einer Tabelle hinzuzufügen. Aber ich habe Probleme damit. Erstens wird die Funktion, bei der alles stattfindet, bei der Änderung eines Dropdown-Menüs von einer HTML-Seite aufgerufen. Ich erstellte eine tr Zeichenkette, die das td innerhalb enthält, das die HTML-Elemente, den Text und andere Sachen enthält. Aber wenn ich versuche, diese generierte Zeile mit der folgenden Tabelle in die Tabelle einzufügen: Der Name der Tabelle ist tblEntAttributes und ich versuche, es zu der tbody hinzuzufügen.

Eigentlich ist jQuery ist nicht in der Lage, tblEntAttributes als HTML-Element zu bekommen. Aber ich kann darauf zugreifen mit documemt.getElementById("tblEntAttributes");

Gibt es eine Möglichkeit, die ich erreichen kann, indem Sie Zeilen in die tbody der Tabelle hinzufügen. Vielleicht eine Umleitung oder so.

Hier ist der gesamte Code:

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); 

Eine Sache, die ich vergaß zu erwähnen, die Funktion ist, wo dieser Code geschrieben wird, ist tatsächlich der Erfolg Callback-Funktion für einen Ajax-Aufruf. Ich kann auf die Tabelle mit document.getElementById("tblEntAttributes") zugreifen, aber aus irgendeinem Grund scheint $(#tblEntAttributes) nicht zu funktionieren.

Answer 1

Ich habe noch nie auf solch ein seltsames Problem wie diese kommen! o.O

Wissen Sie, was das Problem war? $ funktioniert nicht. Ich habe den gleichen Code mit jQuery wie jQuery("#tblEntAttributes tbody").append(newRowContent); versucht und es funktioniert wie ein Charme!

Keine Ahnung, warum dieses seltsame Problem auftritt!

Answer 2

("#tblEntAttributes tbody")

Bedürfnisse

($("#tblEntAttributes tbody")) sein.

Sie sind nicht das Element mit der korrekten Syntax

Hier ist ein Beispiel für beide

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

und

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

Arbeits http://jsfiddle.net/xW4NZ/

Answer 3

Als @wirey appendTo die Auswahl sho Uld Arbeit, wenn nicht, dann können Sie dies versuchen:

Answer 4

Hier ist eine AppendTo-Version mit der HTML-Dropdown-Liste, die Sie erwähnt haben. Es fügt eine weitere Zeile bei "Ändern" ein.

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

Mit einem Beispiel für Sie mit zu spielen. Viel Glück!

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

Answer 5

Verwendung dieses

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

Answer 6

Mit Lodash können Sie eine Vorlage erstellen, und Sie können das tun Weg folgt vor:

<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> 

Und hier das Javascript geht: es

 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++; 
      }); 
     }); 

Hier ist in jsbin