Delete contents of table and replace using JavaScript

Question

I am trying to delete the contents of a upon click and repopulate it based on what they are clicking.

I was able to succesfully modify the with the new title, but I keep running into issues when I want to delete the contents of and replace it with a new one. I've tried doing the removeChild(), the replaceChild(), as well as innerHTML (which doesn't work based on documentation).

How would I successfully on a click, remove the existing table and repopulate it with HTML generated from JavaScript.

HTML:

<table id="captable" border = "5" width="100%" cellpadding="4" cellspacing="5">
   <thead>
      <tr>
         <th colspan="100%">
            <div id="table-title"></div>
         </th>
      </tr>
      <th>Input Date</th>
      <th>Requested Date</th>
   </thead>
   <tbody id="tbodyid">
      <div id="table-entries">
         <tr align = "center">
            <td>3/27/2018</td>
            <td>6/12/2018</td>
         </tr>
      </div>
   </tbody>
</table>

JavaScript:

   function(evt) {
       $("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
       var tBodyInner;
       for (i of dataPoints) {
           console.log("data" + i);
           var data = json.Data[i];
           tBodyInner += ("<tr align = \"center\">");
           tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");

           tBodyInner += ("</tr>");
       }
       //Not sure what to do here so that I clear the existing table, and appened the new tBodyInner html as a replacement
       modal.style.display = "block";
   }

Your HTML is invalid. You can't have <div> as a child of <tbody>. Its children have to be <tr>. — Barmar
– Barmar, Commented Jul 17, 2018 at 20:14

Barmar · Accepted Answer · 2018-07-17 20:18:27Z

First of all, you have to get rid of <div id="table-entries">, this is not a valid location for a DIV.

Second, you need to initialize the variable tBodyInner to an empty string.

Finally, you can use $("#tbodyId").html() to fill in the HTML of the table body.

function(evt) {
  $("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
  var tBodyInner = "";
  for (i of dataPoints) {
    console.log("data" + i);
    var data = json.Data[i];
    tBodyInner += ("<tr align = \"center\">");
    tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");

    tBodyInner += ("</tr>");
  }
  $("#tBodyId").html(tBodyInner);
  modal.style.display = "block";
}

<table id="captable" border="5" width="100%" cellpadding="4" cellspacing="5">
  <thead>
    <tr>
      <th colspan="100%">
        <div id="table-title"></div>
      </th>
    </tr>
    <th>Input Date</th>
    <th>Requested Date</th>
  </thead>
  <tbody id="tbodyid">
    <tr align="center">
      <td>3/27/2018</td>
      <td>6/12/2018</td>
    </tr>
  </tbody>
</table>

arashka · Accepted Answer · 2018-07-17 20:05:42Z

0

Where do you exactly change the html inside the element? You are setting the variable tBodyInner, but never using it. You should use it like you updated the title above, for example:

$("#table-entries").html(tBodyInner);

Also the parentheses around the string concats on the right side are redundant. No harm, but no effect either.

answered Jul 17, 2018 at 20:05

arashka

1,3453 gold badges18 silver badges34 bronze badges

Collectives™ on Stack Overflow

Delete contents of table and replace using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related