How can I add rows to the tbody of a table that is already inside a div container?

Question

How can I add rows to the tbody of a table that is already inside a div container?

I have an existing table and I want to append a tbody element to it. Below is an example of the HTML table:

<div id="myDiv">
    <table class="myTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Last</th>
                <th>First</th>
                <th>DOB</th>
                <th>Nickname</th>
            </tr>
        </thead>
    </table>
</div>

Below is my JavaScript/JQuery code:

var divID = $('#myDiv table.myTable');
var tbl = "<tbody>"; 
for(var i=0; i < numRecs; i++){
    var jsRec = obj.DATA[i];
    tbl += "<tr id='lookup_"+i+"'>";
    tbl += "<td>"+decodeURIComponent(jsRec.ID)+"</td>";
    tbl += "<td>"+decodeURIComponent(jsRec.LAST)+"</td>";
    tbl += "<td>"+decodeURIComponent(jsRec.FIRST)+"</td>";
    tbl += "<td>"+decodeURIComponent(jsRec.DOB)+"</td>";
    tbl += "<td>"+decodeURIComponent(jsRec.NICKNAME)+"</td></tr>";          
}
tbl += "</tbody>";
divID.append(tbl);
$.alert(divID,'Main Menu',1000,600); //JQuery dialog box that takes html variable, title, width and height

The issue I'm facing is that the content in my dialog box appears blank with this code. If anyone can help identify where my code is breaking, please let me know. Thank you.

javascript jquery html css

Answer 1

Answer №1

It seems that the <tr> tag is not properly closed in your loop, resulting in unclosed table rows. jQuery checks HTML validity before adding it to the DOM, so it may be failing silently when attempting to use the append method.

Answer 2

It seems that the <tr> tag is not properly closed in your loop, resulting in unclosed table rows. jQuery checks HTML validity before adding it to the DOM, so it may be failing silently when attempting to use the append method.

Answer 3

Answer №2

To enhance clarity and organization in the element creation process, consider breaking it down into smaller sections, as demonstrated below. This approach makes it easier to pinpoint any issues that may arise along the way. One potential refinement involves substituting sampleData[i]["id"] with decodeURIComponent(jsRec.ID), among other tweaks. The sampleData Array was solely crafted for illustrative purposes. Another suggestion is to potentially incorporate decodeURIComponent() within a loop to handle each property of your object.

(function($) {
  $(document).ready(function() {
    var sampleData = [{
      id: 1,
      last: "lst",
      first: "first",
      DOB: "IDK",
      nickname: "nick"
    }];

    var divID = $('#myDiv table.myTable tbody');
    var current, row, cell;


    for (var i = 0; i < sampleData.length; i++) {
      row = $("<tr></tr>"); //Generate a new row
      cell = $("<td></td>").html(sampleData[i]["id"]); //Craft a cell
      row.append(cell); //Attach the cell
      cell = $("<td></td>").html(sampleData[i]["last"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["first"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["DOB"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["nickname"]);
      row.append(cell);
      divID.append(row); //Insert Row into the Table
    }
  });

})(jQuery);

td,
th,
tr {
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
  <table class="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Last</th>
        <th>First</th>
        <th>DOB</th>
        <th>Nickname</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

In the final stages, you may encounter challenges with

$.alert(divID,'Main Menu',1000,600);

, but simply incorporating a toString() or similar adjustment could resolve it.

Answer 4

To enhance clarity and organization in the element creation process, consider breaking it down into smaller sections, as demonstrated below. This approach makes it easier to pinpoint any issues that may arise along the way. One potential refinement involves substituting sampleData[i]["id"] with decodeURIComponent(jsRec.ID), among other tweaks. The sampleData Array was solely crafted for illustrative purposes. Another suggestion is to potentially incorporate decodeURIComponent() within a loop to handle each property of your object.

(function($) {
  $(document).ready(function() {
    var sampleData = [{
      id: 1,
      last: "lst",
      first: "first",
      DOB: "IDK",
      nickname: "nick"
    }];

    var divID = $('#myDiv table.myTable tbody');
    var current, row, cell;


    for (var i = 0; i < sampleData.length; i++) {
      row = $("<tr></tr>"); //Generate a new row
      cell = $("<td></td>").html(sampleData[i]["id"]); //Craft a cell
      row.append(cell); //Attach the cell
      cell = $("<td></td>").html(sampleData[i]["last"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["first"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["DOB"]);
      row.append(cell);
      cell = $("<td></td>").html(sampleData[i]["nickname"]);
      row.append(cell);
      divID.append(row); //Insert Row into the Table
    }
  });

})(jQuery);

td,
th,
tr {
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
  <table class="myTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>Last</th>
        <th>First</th>
        <th>DOB</th>
        <th>Nickname</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

In the final stages, you may encounter challenges with

$.alert(divID,'Main Menu',1000,600);

, but simply incorporating a toString() or similar adjustment could resolve it.

How can I add rows to the tbody of a table that is already inside a div container?

Answer №1

Answer №2

Similar questions

Spring guide: Updating form elements within a JSP page with Spring framework

The content within the iframe is not properly sized

What is the best way to adjust the height of a Div to be 100%?

Seeking a regular expression to identify special characters appearing at the beginning of a string

PHP script output continuously responded with AJAX

Adding a dynamic style programmatically to an element created using createElement in Vue: A guide

Styles and CSS have been successfully loaded, however, the content is not appearing

Facing challenges in implementing a logic to showcase an intricate page on express.js (node.js) platform

Running Python code with Selenium on an Azure server

I'm encountering an error while attempting to parse the XML file

Sort by characteristics of embedded array - Knockout

What is the best way to showcase the organized values according to their attributes?

Using Jquery to display text when the condition is not met

Hovering in Javascript

What could be the reason behind the occurrence of Content-Length=0 for jQuery AJAX POST requests in the IE 11 browser without

Determining when ng-repeat has completed in Angular JS

Creating a layered effect by overlaying one image on top of another in an HTML5

Tips for accessing the firebase user's getIdToken method in Next.js after a page reload

Having issues with Vue.js v-repeat not displaying any content

What is preventing access to the global scope in this particular situation?