Create new element with button and have content 'Table' | JQUERY

Question

Here I will create a 'Third tab' using the button, when the Create Button has been clicked, the 'Third Tab' will appear in the .tab class and when 'The third tab' is clicked, there is a datatable in it.

So, the conclusion. How to create a div class and contain a datatable with button? .

Here we go : JSFiddle

Snippet: ( JQUERY, HTML, JAVASCRIPT, CSS )

Error Message : "Uncaught TypeError: Cannot read property 'style' of null" | Line 40.

 $(document).ready(function() { $('.tabel_audience').DataTable({}); // datatable }); $(document).ready(function() { $('.submitButton').click(function () { var tab = '<button class="tablinks" onclick="openTab(event, \\'thirdTab\\')" id="default">Third Tab</button>'; var content = '<div id="mainTab" class="tabcontent">' + '<table class="tabel_audience" class="table table-bordered" cellspacing="0">' + '<thead>' + '<tr>' + '<th style="border-color:rgb(221, 221, 221);">' + '<input name="select_all" value="1" id="selectAll" type="checkbox" />' + '</th>' + '<th>Name</th>' + '<th>Type</th>' + '<th>Size</th>' + '</tr>' + '</thead>' + '</table>' + '</div>'; $('.tab').append(tab); $('.bodycontent').append(content); }); }); 

  .submitButton { font-variant: petite-caps; border: 0px; color: #fff; text-shadow: 0 1px rgba(0,0,0,0.1); background-color: #4d90fe; padding: 17px 0px; font-family: Quicksand; font-size: 14px; width: 290px; } .submitButton:hover { border: 0px; text-shadow: 0 1px rgba(0,0,0,0.3); background-color: #357ae8; } body { font-family: "Lato", sans-serif; } /* Style the tab */ div.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ div.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ div.tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ div.tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } 

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <!-- TABS NAVIGATION --> <div class="tab"> <!-- THIS IS CREATE BUTTON--> <input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 150px;"> <!-- THIS IS TAB BUTTON--> <button class="tablinks" onclick="openTab(event, 'mainTab')" id="default">Main Tab</button> <button class="tablinks" onclick="openTab(event, 'secondTab')">Second Tab</button> </div> <!-- END of TABS BUTTON --> <!-- TABS CONTENT --> <div class="bodycontent"> <div id="mainTab" class="tabcontent"> <table class="tabel_audience" class="table table-bordered" cellspacing="0"> <thead> <tr> <th style="border-color:rgb(221, 221, 221);"> <input name="select_all" value="1" id="selectAll" type="checkbox" /> </th> <th>Name</th> <th>Type</th> <th>Size</th> </tr> </thead> </table> </div> <div id="secondTab" class="tabcontent"> <table class="tabel_audience" class="table table-bordered" cellspacing="0"> <thead> <tr> <th style="border-color:rgb(221, 221, 221);"> <input name="select_all" value="1" id="selectAll" type="checkbox" /> </th> <th>Name</th> <th>Type</th> </tr> </thead> </table> </div> </div> <!-- END of TABS CONTENT --> <script> function openTab(event, TabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(TabName).style.display = "block"; event.currentTarget.className += " active"; } document.getElementById("default").click(); </script> 

Original Code : W3Shcools

Image My Project Here

Answer 1

You need to correct the name of the new tab to thirdTab instead of mainTab as it is currently set in the statement <div id="mainTab" class="tabcontent"> . Change this to <div id="thirdTab" class="tabcontent"> to make it work.

I didn't look at the code why the whole table isn't showing up. Let me know if you're unable to get that right.

 $(document).ready(function() { $('.tabel_audience').DataTable({}); // datatable }); $(document).ready(function() { $('.submitButton').click(function () { var tab = '<button class="tablinks" onclick="openTab(event, \\'thirdTab\\')" id="thirdTabButton">Third Tab</button>'; var content = '<div id="thirdTab" class="tabcontent">' + '<table class="tabel_audience" class="table table-bordered" cellspacing="0">' + '<thead>' + '<tr>' + '<th style="border-color:rgb(221, 221, 221);">' + '<input name="select_all" value="1" id="selectAll" type="checkbox" />' + '</th>' + '<th>Name</th>' + '<th>Type</th>' + '<th>Size</th>' + '</tr>' + '</thead>' + '</table>' + '</div>'; $('.tab').append(tab); $('.bodycontent').append(content); }); }); 

  .submitButton { font-variant: petite-caps; border: 0px; color: #fff; text-shadow: 0 1px rgba(0,0,0,0.1); background-color: #4d90fe; padding: 17px 0px; font-family: Quicksand; font-size: 14px; width: 290px; } .submitButton:hover { border: 0px; text-shadow: 0 1px rgba(0,0,0,0.3); background-color: #357ae8; } body { font-family: "Lato", sans-serif; } /* Style the tab */ div.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ div.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ div.tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ div.tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } 

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <!-- TABS NAVIGATION --> <div class="tab"> <!-- THIS IS CREATE BUTTON--> <input type="button" class="submitButton" id="submitButton" value="Create" style="width:142px;margin-left: 150px;"> <!-- THIS IS TAB BUTTON--> <button class="tablinks" onclick="openTab(event, 'mainTab')" id="default">Main Tab</button> <button class="tablinks" onclick="openTab(event, 'secondTab')">Second Tab</button> </div> <!-- END of TABS BUTTON --> <!-- TABS CONTENT --> <div class="bodycontent"> <div id="mainTab" class="tabcontent"> <table class="tabel_audience" class="table table-bordered" cellspacing="0"> <thead> <tr> <th style="border-color:rgb(221, 221, 221);"> <input name="select_all" value="1" id="selectAll" type="checkbox" /> </th> <th>Name</th> <th>Type</th> <th>Size</th> </tr> </thead> </table> </div> <div id="secondTab" class="tabcontent"> <table class="tabel_audience" class="table table-bordered" cellspacing="0"> <thead> <tr> <th style="border-color:rgb(221, 221, 221);"> <input name="select_all" value="1" id="selectAll" type="checkbox" /> </th> <th>Name</th> <th>Type</th> </tr> </thead> </table> </div> </div> <!-- END of TABS CONTENT --> <script> function openTab(event, TabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(TabName).style.display = "block"; event.currentTarget.className += " active"; } document.getElementById("default").click(); </script> 

Answer 2

write thirdTab instead of maintab in div id so it will work

var content = '<div id="mainTab" class="tabcontent">Third tab' +
  '<table class="tabel_audience" class="table table-bordered" cellspacing="0">' +
    '<thead>' +
      '<tr>' +
        '<th style="border-color:rgb(221, 221, 221);">' +
          '<input name="select_all" value="1" id="selectAll" type="checkbox" />' +
        '</th>' +
        '<th>Name</th>' +
        '<th>Type</th>' +
        '<th>Size</th>' +
      '</tr>' +
    '</thead>' +
  '</table>' +
'</div>';