Calvin Ananda
Reputation: 1530
Create new element with button and have content 'Table' | JQUERY
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
Upvotes: 0
Views: 115
Answers (2)
Yatin
Reputation: 1198
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>Upvotes: 2
Bhargav Chudasama
Reputation: 7171
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>';
Upvotes: 0
Related Questions
- jQuery add button to table heads
- how to append a button to a table
- How to generate a new table row with an onClick event
- How to show new HTML table on button click
- Adding button to dynamically generated HTML table
- How do I add an extra html table row upon button click using jQuery?
- Add button with function call for generatet table
- Add Table Row Button on Click
- How to generate button with event and table using jquery
- How do I add a button to a table row in Jquery