How to load HTML table in div container? JQuery/JavaScript

Question

I have navigation bar with two items so far. This can have more item potentially but for now I just need two. When user opens the page I want to load the content of the first item in my navigation bar. Each item has separate table. So on load first table should be loaded on the page. If user click on the different link I want that to show on the screen. I'm not sure what is the best approach/solution for this problem. Here is my HTML code:

<div class="container">
   <section class="mainBox">
        <h3>Home Page</h3>
        <nav class="xNavigation">
            <a href="#" id="tab1" onClick="openTab('tab1')">Info 1</a> |
            <a href="#" id="tab2" onClick="openTab('tab2')">Info 2</a> |
        </nav>
        <div id="dataContainer">
           //Here I want to load the tables
        </div>
    </section>
</div>

I already have built the tables on the page:

<table class="tab1Class" id="tab1Tbl">
    <caption>Info 1</caption>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td><input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly /></td>
    </tr>
</table>

<table class="tab2Class" id="tab2Tbl">
    <caption>Info 2</caption>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td><input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly /></td>
    </tr>
</table>

On page load I want to load first table. After that based on the users choice I want to load second table. In that case I'm not sure if table should be removed from the container or set to hide?

Here is my idea but that did not work:

function openTab(tblID){
        $('.xNavigation a').each(function(i){
            if(this.id == tblID){
                $('#'+tblID).show();
            }else{
              $(this.id).hide();
            }
        });
    }

If anyone can help with this problem please let me know.

Answer 1

Instead of adding unique ids for the tables, you could give them a data-id that matches the nav item's id and toggle based on that:

JS Fiddle

Simplify the JS

$('.xNavigation a').on('click', function() {
  var id = $(this).prop('id');
  $('#dataContainer > table[data-id=' + id + ']').show();
  $('#dataContainer > table:not([data-id=' + id + '])').hide();
});

Start off by putting both tables where they belong, but hide the tables you don't want shown like:

CSS

#dataContainer > table:not([data-id="tab1"]) {
  display: none;
}

HTML

<div class="container">
  <section class="mainBox">
    <h3>Home Page</h3>
    <nav class="xNavigation">
      <a href="#" id="tab1">Info 1</a> |
      <a href="#" id="tab2">Info 2</a> |
    </nav>
    <div id="dataContainer">
      <table class="tab1Class" data-id="tab1">
        <caption>Info 1</caption>
        <tr>
          <th>Last Name</th>
          <th>First Name</th>
          <th>DOB</th>
        </tr>
        <tr>
          <td>
            <input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly />
          </td>
          <td>
            <input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly />
          </td>
          <td>
            <input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly />
          </td>
        </tr>
      </table>

      <table class="tab2Class" data-id="tab2">
        <caption>Info 2</caption>
        <tr>
          <th>Last Name</th>
          <th>First Name</th>
          <th>DOB</th>
        </tr>
        <tr>
          <td>
            <input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly />
          </td>
          <td>
            <input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly />
          </td>
          <td>
            <input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly />
          </td>
        </tr>
      </table>
    </div>
  </section>
</div>

Answer 2

1. Put your tables inside the div #dataContainer. No need to load them there, just show/hide the ones you want.

2. Give all tables the css class 'tabTable', and give the first one an extra class called 'active'

3. Each table already has a unique id, so nothing to do here, but it is important that they have one.

4. Use css to hide all elements with the tabTable class

5. Give all links that will cause tabs to change the class of tabLink and the attribute of data-opens="[id-of-table]" where [id-of-table] is the unique id of the table it opens.

6. Use the below JS

7. Here's a JSfiddle

JS

$(document).ready(function () {
  $(document).on('click', '.xNavigation a.tabLink', function (evt) {
    evt.preventDefault();
    var opens = $(evt.target).data('opens');
    $('.tabTable').removeClass('active');
    var el = $('#' + opens).addClass('active');
  });
});

CSS

.tabTable { display: none }
.tabTable.active {display: table} /* Cause we're using tables not divs */

HTML

<div class="container">
   <section class="mainBox">
      <h3>Home Page</h3>
      <nav class="xNavigation">
          <a href="#" class="tabLink" id="tab1" data-opens="tab1Tbl">Info 1</a> |
          <a href="#" class="tabLink" id="tab2" data-opens="tab2Tbl">Info 2</a> |
      </nav>

      <div id="dataContainer">
<table class="tabTable active" id="tab1Tbl">
    <caption>Info 1</caption>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td><input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly /></td>
    </tr>
</table>

<table class="tabTable" id="tab2Tbl">
    <caption>Info 2</caption>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td><input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly /></td>
        <td><input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly /></td>
    </tr>
</table>
      </div>
    </section>
</div>

Answer 3

1.) Place both tables inside a hidden div.
2.) Call openTab with the table-id (tab1Tbl or tab2Tbl).

openTab(tabId):
1.) If there is a table in #dataContainer move him to the hidden div.
2.) Get the table with #tabId from the hidden div and move it to #dataContainer.