Dodawanie wierszy do tbody tabeli przy użyciu jQuery

Question

Próbuję dodać wiersze do tabeli tbody. Ale mam problemy z osiągnięciem tego. Po pierwsze, funkcja, w której wszystko odbywa się, jest wywoływana przy zmianie listy rozwijanej ze strony html. Stworzyłem ciąg tr zawierający wszystkie td w środku zawierającym elementy html, tekst i inne rzeczy. Ale gdy próbuję dodać wygenerowany wiersz do tabeli, używając:

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

Występuje błąd. Nazwa tabeli to tblEntAttributes i próbuję dodać ją do tbody.

W rzeczywistości, co się dzieje, jQuery nie może uzyskać tblEntAttributes jako elementu html. Ale mogę uzyskać do niego dostęp, używając documemt.getElementById("tblEntAttributes");

Czy mogę to osiągnąć, dodając wiersze do tabeli tbody. Może obejście czy coś takiego.

Oto cały kod:

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

Jedno zapomniałem wspomnieć jest funkcja, gdzie ten kod jest napisane jest rzeczywiście sukces funkcja zwrotna dla wywołania AJAX. Mogę uzyskać dostęp do tabeli za pomocą document.getElementById("tblEntAttributes"), ale z jakiegoś powodu $(#tblEntAttributes) wydaje się nie działać.

Answer 1

Nigdy kiedykolwiek natknąć się taki dziwny problem jak ten! o.O

Czy wiesz, jaki był problem? $ nie działa. Próbowałem tego samego kodu z jQuery jak jQuery("#tblEntAttributes tbody").append(newRowContent); i działa jak urok!

Nie mam pojęcia, dlaczego ten dziwny problem występuje!

Answer 2

("#tblEntAttributes tbody")

musi być

($("#tblEntAttributes tbody")).

Nie jesteś wybierając element z prawidłową składnią

Oto przykład zarówno

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

i

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

pracy http://jsfiddle.net/xW4NZ/

Answer 3

Jak @wirey powiedział appendTo sho uld pracy, jeśli nie to można spróbować to:

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

Answer 4

Oto wersja appendTo używając menu rozwijanego HTML wzmiance. Wstawia kolejny wiersz "zmiany".

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

Przykład dla Ciebie do zabawy. Powodzenia!

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

Answer 5

użycie tego

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

Answer 6

Z Lodash można utworzyć szablon i można to zrobić w następujący sposób:

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

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

tutaj jest w postaci jsbin