Aggiunta di righe a tbody di una tabella utilizzando jQuery

Question

Sto tentando di aggiungere righe allo tbody di una tabella. Ma sto avendo problemi con il raggiungimento di questo. In primo luogo, la funzione in cui tutto avviene viene chiamata al cambio di un menu a discesa da una pagina html. Ho creato una stringa tr contenente tutto lo td all'interno di quello contenente gli elementi html, il testo e altre cose. Ma quando sto cercando di aggiungere quella riga generata alla tabella utilizzando:

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

Sto riscontrando un errore. Il nome del tavolo è tblEntAttributes e sto cercando di aggiungerlo allo tbody.

In realtà ciò che accade è jQuery non è in grado di ottenere tblEntAttributes come elemento html. Ma posso accedervi utilizzando documemt.getElementById("tblEntAttributes");

C'è un modo per ottenerlo aggiungendo righe allo tbody della tabella. Forse una tangenziale o qualcosa del genere.

Ecco l'intero codice:

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

Una cosa che ho dimenticato di menzionare è la funzione in cui questo codice è scritto è in realtà la funzione di callback successo per una chiamata AJAX. Sono in grado di accedere alla tabella utilizzando document.getElementById("tblEntAttributes") ma per qualche motivo $(#tblEntAttributes) non sembra funzionare.

Answer 1

non ho mai mai incontrato uno strano problema così come questo! o.O

Sai qual era il problema? $ non sta funzionando. Ho provato lo stesso codice con jQuery come jQuery("#tblEntAttributes tbody").append(newRowContent); e funziona come un incantesimo!

Non ho idea del motivo per cui si verifica questo strano problema!

Answer 2

("#tblEntAttributes tbody")

deve essere

($("#tblEntAttributes tbody")).

Non si sta selezionando l'elemento con la sintassi corretta

Ecco un esempio di entrambi

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

e

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

lavoro http://jsfiddle.net/xW4NZ/

Answer 3

Come @wirey detto appendTo sho lavoro ULD, se poi non si può provare questo:

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

Answer 4

Ecco una versione appendTo utilizzando il menu a discesa html lei ha citato. Inserisce un'altra riga su "modifica".

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

Con un esempio con cui giocare. Buona fortuna!

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

Answer 5

uso questo

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

Answer 6

Con Lodash è possibile creare un modello e si può fare in questo modo:

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

E qui va il 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++; 
      }); 
     }); 

Eccolo è in jsbin