Adding rows to tbody of a table using jQuery

Question

I am trying to add rows to the tbody of a table  But I am having issues with achieving that  Firstly  the function where everything takes place is called on change of a dropdown from a html page  I created a tr string containing all the td inside that containing the html elements  text and other stuff  But when I am trying to add that generated row to the table using     newRowContent  appendTo   tblEntAttributes tbody      I am encountering an error  The name of the table is tblEntAttributes and I am trying to add it to the tbody   Actually what s happening is jQuery is unable to get tblEntAttributes as an html element  But I can access it using documemt getElementById  tblEntAttributes      Is there any way I can achieve this by adding rows to the tbody of the table  Maybe a bypass or something   Here s the entire code   var newRowContent     lt tr gt  lt td gt  lt input type   checkbox   id       chkboxId       value       chkboxValue       gt  lt  td gt  lt td gt     displayName     lt  td gt  lt td gt     logicalName     lt  td gt  lt td gt     dataType     lt  td gt  lt td gt  lt input type   checkbox   id   chkAllPrimaryAttrs   name   chkAllPrimaryAttrs   value   chkAllPrimaryAttrs   gt  lt  td gt  lt td gt  lt input type   checkbox   id   chkAllPrimaryAttrs   name   chkAllPrimaryAttrs   value   chkAllPrimaryAttrs   gt  lt  td gt  lt  tr gt         tblEntAttributes tbody   append newRowContent      One thing I forgot to mention is the function where this code is written is actually the success callback function for a ajax call  I am able to access the table using document getElementById  tblEntAttributes   but for some reason    tblEntAttributes  doesn t seem to work

User · Answer

Here is an appendTo version using the html dropdown you mentioned. It inserts another row on "change".

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

With an example for you to play with. Best of luck!

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

User · Answer

With Lodash you can create a template and you can do that following way        lt div class  container  gt           lt div class  row justify-content-center  gt               lt div class  col-12  gt                   lt table id  tblEntAttributes  class  table  gt                       lt tbody gt                           lt tr gt                               lt td gt                                  chkboxId                              lt  td gt                               lt td gt                                 chkboxValue                              lt  td gt                               lt td gt                                  displayName                              lt  td gt                               lt td gt                                 logicalName                              lt  td gt                               lt td gt                                  dataType                              lt  td gt                           lt  tr gt                       lt  tbody gt                   lt  table gt                   lt button class  btn btn-primary  id  test  gt appendTo lt  button gt               lt  div gt           lt  div gt        lt  div gt    And here goes the javascript           var count   1          window addEventListener  load   function                  var compiledRow     template   lt tr gt  lt td gt  lt input type   checkbox   id    lt    chkboxId   gt    value    lt    chkboxValue   gt    gt  lt  td gt  lt td gt  lt    displayName   gt  lt  td gt  lt td gt  lt    logicalName   gt  lt  td gt  lt td gt  lt    dataType   gt  lt  td gt  lt td gt  lt input type   checkbox   id   chkAllPrimaryAttrs   name   chkAllPrimaryAttrs   value   chkAllPrimaryAttrs   gt  lt  td gt  lt td gt  lt input type   checkbox   id   chkAllPrimaryAttrs   name   chkAllPrimaryAttrs   value   chkAllPrimaryAttrs   gt  lt  td gt  lt  tr gt                 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                                  Here it is in jsbin

User · Answer

use this      tblEntAttributes tbody   append newRowContent

User · Answer

tblEntAttributes tbody     needs to be       tblEntAttributes tbody       You are not selecting the element with the correct syntax  Here s an example of both     newRowContent  appendTo     tblEntAttributes       and      tblEntAttributes tbody   append newRowContent     working http   jsfiddle net xW4NZ

User · Answer

I have never ever come across such a strange problem like this  o O  Do you know what the problem was    isn t working  I tried the same code with jQuery like jQuery   tblEntAttributes tbody   append newRowContent   and it works like a charm    No idea why this strange problem occurs

User · Answer

As  wirey said appendTo should work  if not then you can try this       tblEntAttributes tbody   append newRowContent

[jquery] Adding rows to tbody of a table using jQuery

Examples related to jquery

Examples related to dynamic

Examples related to html-table

Examples related to rows