jQuery 3.3.1 - row is not added to tbody of a table using append()

Question

I am trying to dynamically add a row to a table on the html upon a click event with JQuery 3.3.1 and Bootstrap 4.

HTML:

<table id='tblAddedCallsign' class='table table-striped'>
</table>

JAVASCRIPT:

var row =   '<tr>' +
                '<td class="text-right">' + callsign_id + '</td>' +
                '<td class="text-right">' + callsign_name + '</td>' +
                '<td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="' + callsign_id + '"></td>' +
                    '</tr>';

$('#tblAddedCallsign').append(row);

When the click event occurs, html is rendered like:

<table id="tblAddedCallsign" class="table table-striped">
    <tr>
        <td class="text-right">360</td>
        <td class="text-right">BIRDDOG 386</td>
        <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="360"></td>
    </tr>
    <tr>
        <td class="text-right">607</td>
        <td class="text-right">BIRDDOG 376</td>
        <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="607"></td>
    </tr>
</table>

I was actually expecting it to be:

<table id="tblAddedCallsign" class="table table-striped">
  <tbody>
    <tr>
        <td class="text-right">360</td>
        <td class="text-right">BIRDDOG 386</td>
        <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="360"></td>
    </tr>
    <tr>
        <td class="text-right">607</td>
        <td class="text-right">BIRDDOG 376</td>
        <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="607"></td>
    </tr>
  </tbody>
</table>

So the problem is tbody was not automatically added into the table element upon the click event, so that the Bootstrap table style was not applied.

Answer 1

Then you need to put <tbody> in html

There is two way

1. add <tbody> with dynamic html which you append
2. Give <tbody> to your table and append row in that body

var callsign_id = 1;
var callsign_name = 'name';
var row =   ' <tbody><tr>' +
                '<td class="text-right">' + callsign_id + '</td>' +
                '<td class="text-right">' + callsign_name + '</td>' +
                '<td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="' + callsign_id + '"></td>' +
                    '</tr> </tbody>';

$('#tblAddedCallsign').append(row);



// Another way
var row =   ' <tr>' +
                '<td class="text-right">' + callsign_id + '</td>' +
                '<td class="text-right">' + callsign_name + '</td>' +
                '<td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="' + callsign_id + '"></td>' +
                    '</tr> ';
$('#addRow').append(row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='tblAddedCallsign' class='table table-striped'>
</table>

// Another way
<table id='tblAddedCallsign1' class='table table-striped'>
<tbody id="addRow">
</tbody>
</table>

Answer 2

Simply specify tbody in the table:

<table id='tblAddedCallsign' class='table table-striped'>
  <tbody></tbody>
</table>

I will also prefer Template Literals to build the htmlString which is more cleaner.

Demo:

var callsign_id = '01X';
var callsign_name = 'John';
var row = `<tr>
          <td class="text-right">${callsign_id}</td>
          <td class="text-right">${callsign_name}</td>
          <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id=${ callsign_id}></td>
          </tr>`;

$('#tblAddedCallsign').append(row);

tbody{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='tblAddedCallsign' class='table table-striped'>
  <tbody></tbody>
</table>

Answer 3

I think you find tbody, then append your row element.

$('#tblAddedCallsign tbody').append(row);

Answer 4

Add the tbody to your HTML and the row will be inserted inside it.

Appending to

• $('#tblAddedCallsign')
• $('#tblAddedCallsign tbody')
• $('#tblAddedCallsign > tbody')

should all work properly (difference between 2nd and 3rd is that the latter selects only direct tbody children of the table element).

callsign_id = 1;
callsign_name = "name";
var row =   '<tr>' +
                '<td class="text-right">' + callsign_id + '</td>' +
                '<td class="text-right">' + callsign_name + '</td>' +
                '<td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="' + callsign_id + '"></td>' +
                    '</tr>';

$('#tblAddedCallsign').append(row);
$('#tblAddedCallsign tbody').append(row);
$('#tblAddedCallsign > tbody').append(row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='tblAddedCallsign' class='table table-striped'>
    <tbody></tbody>
</table>