bootstrap numbered of rows in table - javascript

I've been trying to make a table with bootstrap. I've found that it's actually possible to do something alike to auto-increment. The example could be seen here:
http://jsfiddle.net/DominikAngerer/yx275pyd/2/
<table data-toggle="table" data-
url="/gh/get/response.json/wenzhixin/bootstrap-
table/tree/master/docs/data/data1/">
<thead>
<tr>
<th data-formatter="runningFormatter">Index</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
and using following jscript
function runningFormatter(value, row, index) {
return index;
}
The problem is its using data from remote url. can i do something similiar with a table that has some preset values by my already? the goal of this is that i could prepend new rows to table and it would index rows. the starting table could look something like this:
<table class="table table-inverse">
<thead class="thead-default">
<tr>
<th data-formatter="runningFormatter">Index</th>
<th>Name</th>
<th>Surname</th>
<th>Job</th>
<th>Wage, €</th>
<th>bla, €</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>bla</td>
<td>blum</td>
<td>
<p class="btn" style="width:10%; padding-bottom:0; margin-
bottom:0; border-bottom:0"><span class="fa fa-edit"></span></p>
<p class="btn" style="width:10%; padding-bottom:0; margin-
bottom:0; border-bottom:0"><span class="fa fa-trash"></span></p>
</td>
</tr>
<tr>
<td></td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>bla</td>
<td>blum</td>
<td>
<p class="btn" style="width:10%; padding-bottom:0; margin-
bottom:0; border-bottom:0"><span class="fa fa-edit"></span></p>
<p class="btn" style="width:10%; padding-bottom:0; margin-
bottom:0; border-bottom:0"><span class="fa fa-trash"></span></p>
</td>
</tr>
</tbody>
</table>
If anyone know how index column could go like this 0001, it would be wonderful

Related

How can I put another content under each row in my table? [duplicate]

This question already has answers here:
Hide div by default and show it on click with bootstrap
(4 answers)
Closed 1 year ago.
I Googled a lot but I can't find something for my case. I have a Bootstrap table where I want on click on my rows to show additional info for the main row.
I can't find a way to do this.
I have this code:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
And if I try this:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>
Then my table is broken.
How can I achieve this - on click show additional info for each of my rows?
Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.

JavaScript data-toogle

I have a table in html and want to replace that table with another table when a button is pressed and again back to first table when second button is pressed. i tried this roughly in a html file and it is working but when same logic i applied in my django project to toggle table data it is not working. Below is the JS ansd CSS code.
CSS
table.hidden {
display: none;
}
JavaScript
document.getElementById("b1").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"02"
).innerHTML;
});
document.getElementById("b2").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"03"
).innerHTML;
});
The html table and buttons code is as follows
<button id="b1" class="btn btn-outline-success btn-xs mb-2 ml-5" style="font-size: 0.8em;">Daily Sale </button>
<button id="b2" class="btn btn-outline-success btn-xs mb-2 ml-2" style="font-size: 0.8em;">Monthly</button>
<table id="01" class="table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
{% for x,y,z in sum_list %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<table id="02" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
{% for x,y,z in sum_list %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<table id="03" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">ABC</th>
<th scope="col">XYZ</th>
<th scope="col">ASD</th>
</tr>
</thead>
<tbody>
{% for x,y,z in month_sum %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
The table with id 01 will be default table and will be visible when page is load. The table with id 02 will be shown when button with id b1 is pressed and table with id 03 with button having id b2. please help me solving this.
Here's your original code, just removed the spare </div> tag, it seems to be working though. Can you tell what the problem is? As mentioned in my comment above, showing and hiding DIV tags would be a far better approach, without the need of the redundant third table.
document.getElementById("b1").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"02"
).innerHTML;
});
document.getElementById("b2").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"03"
).innerHTML;
});
table.hidden {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button id="b1" class="btn btn-outline-success btn-xs mb-2 ml-5" style="font-size: 0.8em;">Daily Sale </button>
<button id="b2" class="btn btn-outline-success btn-xs mb-2 ml-2" style="font-size: 0.8em;">Monthly</button>
<table id="01" class="table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>
<table id="02" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>
<table id="03" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">ABC</th>
<th scope="col">XYZ</th>
<th scope="col">ASD</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>
Here is a simple code to show you "my" method to do this
const btChangeTable = document.getElementById('bt-Change-Table')
, AllTableDiv = document.getElementById('All-tables')
, TableActiv = { current:0, classList: [ 'table1', 'table2', 'table3' ] }
;
btChangeTable.onclick = () =>
{
TableActiv.current = ++TableActiv.current % TableActiv.classList.length
AllTableDiv.className = TableActiv.classList[ TableActiv.current ]
}
table {
margin : 1em;
border-collapse : collapse;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
td {
border : 1px solid gray;
text-align : center;
padding : .7em 0;
width : 2em;
}
#All-tables.table1 > #Table-2,
#All-tables.table1 > #Table-3 { display : none }
#All-tables.table2 > #Table-1,
#All-tables.table2 > #Table-3 { display : none }
#All-tables.table3 > #Table-1,
#All-tables.table3 > #Table-2 { display : none }
<button id="bt-Change-Table">Change Table view</button>
<div id="All-tables" class="table1">
<table id="Table-1">
<caption> table 1 - Daily Sale </caption>
<tbody>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
<tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr>
</tbody>
</table>
<table id="Table-2">
<caption> table 2 - Monthly Sale </caption>
<tbody>
<tr> <td>i</td> <td>j</td> <td>k</td> <td>l</td> </tr>
<tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
</tbody>
</table>
<table id="Table-3">
<caption> table 3 - Year Sale </caption>
<tbody>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
<tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
</tbody>
</table>
</div>

Is it possible to make a sticky table header with rotated header cells?

The table below contains a sticky table header, however I would like a few of the table header cells to be rotated. The issue here is that currently these table header cells (<th> elements) will be appearing outside of the screen or table header itself (<thead> element).
Is it possible to make a sticky table header with rotated header cells?
Working table with sticky header (optional sample code):
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
JSFiddle
Broken table with sticky header (this piece of code contains what I am trying to do):
Added style="transform: rotate(-90deg); text-align: center;" to a <th> element.
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" style="transform: rotate(-90deg); text-align: center;">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
JSFiddle
(To replicate the problem, please try to scroll down and see the result. The table header will not be entirely visible and when assigning a background-color to all the <th> elements, it will appear outside of the <thead> as well).
The reason for the rotation is because I want to save some space in width of the table by changing table header orientation.
Am I required to rather write some JavaScript for this kind of behaviour or will plain CSS be able to solve this issue too?
You could instead of rotating the text as a block, have the text written in a top-to-bottom instead of left-to-right orientation:
(Thanks to Константин Ван for the inspiration)
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
.sticky-table thead tr th.vertical {
-webkit-text-orientation: upright;
-webkit-writing-mode: vertical-rl;
text-orientation: upright;
writing-mode: vertical-rl;
text-align: center;
}
.sticky-table thead tr th.vertical span.chromeFix
{
text-orientation: upright;
writing-mode: vertical-rl;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" class="vertical"><span class="chromeFix">First</span></th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
Notes
Having checked in Edge, this might not be the best solution, as it's not compatible with all browsers.
Thanks to Turnip for pointing out that this only works in Chrome if you wrap the text in a span or some such thing.

Loop table to even row amount in JQuery

The question I have a table pulling from the backend for events, will list out in the font in 3 different column with specific categories, but sometimes only have 1 event or 2, but I need to at least display 3 items.
So I try to use jQuery each function to check how many rows in the table if only have 1 add 2 rows if only have 1 row add 2 instead.
So the table will be same height no matter how many events display.
My code doesn't work correctly, so I was hoping anyone can help me out with this.
Here's my sample code:http://jsfiddle.net/s2devfrg/
Here's the jQuery:
jQuery(function(){
jQuery('#table-amount tbody').each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr> </tr>");
jQuery(this).append("<tr> </tr>");
} else {
//if table only have two add one roe
if(number === 2 ){
jQuery(this).append("<tr> </tr>");
}
}
})
})
The selector you are using on .each is wrong. There are no elements with the passed id.
Also there are couple of blank tr's in your html which I have removed.
Try this code below:
jQuery(function(){
jQuery(".table tbody").each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr><td> </td></tr><tr><td> </td></tr");
} else if(number === 2 ){
jQuery(this).append("<tr><td> </td></tr>");
}
})
})
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead class="table-amount">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Updated fiddle link
I have reviewed you sample code, first of all kindly note that in jQuery
when you find tr it will count total number of rows including tr inside thead.
So your
total counts are always one more than actual rows.
Second thing you should not append just tr you should provide same structure
as in
your existing rows.
Also in first table structure you had one extra th may be typo.
In first and third table structure you have one tr extra with empty
structure
instead, you should have same structure as you have for others.
here is the link for modified JS Fiddle link
https://jsfiddle.net/patelmurtuza/kj8zgqad/

Show a pop-up that contains details of every row in html table

I have an html table like this:
<table id="mytable" class="table table-striped">
<tbody>
<c:forEach items="${listeCollabDeRrh}" var="collab">
<tr>
<td>${collab.matricule }</td>
<td>${collab.nom }</td>
<td>${collab.prenom}</td>
<td hidden="true">${collab.bu.getNomBU()}</td>
<td hidden="true">${collab.contact}</td>
<td hidden="true">${collab.dateEmbauche}</td>
<td>
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color"></span>
</button>
</p>
</td>
</tr>
</c:forEach>
</tbody>
</table>
If I click on details button I will have the pop-up which contains all the details of a row:
<div class="modal-body">
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Matricule</th>
<th>Nom</th>
<th>Pronom</th>
<th>BU</th>
<th>Contact</th>
<th>Date d'ambauche</th>
<th>RRH</th>
</thead>
<tbody>
<tr>
<td>matricule of collab</td>
<td>nom of collab</td>
<td>prenom of collab</td>
<td>bu of collab</td>
<td>contact of collab</td>
<td>dateEmbauche of collab</td>
</tr>
</tbody>
</table>
The problem is that the HTML table and the details pop-up are in the same jsp page. I think that I can use the controller in the server side with a form.
How can I show the details pop-up when I press the details button of a row?
Another variant is to use jQuery. And information read from server just if user click on button.
http://api.jquery.com/jquery.ajax/
invest your time for this and make better, faster and data low profile applications.
But if you cannot use, Farhan have nice solution.
Let's say it's for all of the tables on the UI:
<script>
var cells=document.getElementsbyTagName("td");
for(i=0;i<cells.length;i++){
cells[i].onclick=function(){alert(this.innerHTML);};
}
</script>
Keep the HTML table structure normal. No need to call any functions over there.
$(document).ready(function(){
$(".detail_button").on("click",function(){
var parentTr = $(this).closest("tr");
var counter = 1;
$("td", $(parentTr)).each(function(){
if(!($(this).hasClass("detail_td"))){
$(".modal-body tr td:nth-child("+counter+")").text($(this).text());
counter++;
}
$(".modal-body").show();
$("#bodytable").hide();
});
});
$("#hide_popup").on("click",function(){
$(".modal-body").hide();
$("#bodytable").show();
});
});
.modal-body{
display:none;
position:absolute;
top:0;
left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="modal-body">
<input type="button" id="hide_popup" value="Hide Popup"/>
<div style="clear"></div>
<table id="mytable" class="table table-bordred table-striped" border="1">
<thead>
<th>Matricule</th>
<th>Nom</th>
<th>Pronom</th>
<th>BU</th>
<th>Contact</th>
<th>Date d'ambauche</th>
<th>RRH</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<table id="bodytable" class="table table-bordred table-striped" border="1">
<thead>
<th>Matricule</th>
<th>Nom</th>
<th>Pronom</th>
<th>BU</th>
<th>Contact</th>
<th>Date d'ambauche</th>
<th>RRH</th>
<th>Detail</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td class="detail_td">
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color">Detail</span>
</button>
</p>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td class="detail_td">
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color">Detail</span>
</button>
</p>
</td>
</tr>
</tbody>
</table>
As per my understanding you want to show relevant row data in popup on detail button click. if not then please correct me
HTML
<div class="modal-body">
<input type="button" id="hide_popup" value="Hide Popup"/>
<div style="clear"></div>
<table id="mytable" class="table table-bordred table-striped" border="1">
<thead>
<th>Matricule</th>
<th>Nom</th>
<th>Pronom</th>
<th>BU</th>
<th>Contact</th>
<th>Date d'ambauche</th>
<th>RRH</th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<table id="bodytable" class="table table-bordred table-striped" border="1">
<thead>
<th>Matricule</th>
<th>Nom</th>
<th>Pronom</th>
<th>BU</th>
<th>Contact</th>
<th>Date d'ambauche</th>
<th>RRH</th>
<th>Detail</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td class="detail_td">
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color">Detail</span>
</button>
</p>
</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td class="detail_td">
<p data-placement="top" data-toggle="tooltip" title="Details">
<button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details"> <span class="glyphicon glyphicon-text-color">Detail</span>
</button>
</p>
</td>
</tr>
</tbody>
</table>
JQUERY
$(document).ready(function(){
$(".detail_button").on("click",function(){
var parentTr = $(this).closest("tr");
var counter = 1;
$("td", $(parentTr)).each(function(){
if(!($(this).hasClass("detail_td"))){
$(".modal-body tr td:nth-child("+counter+")").text($(this).text());
counter++;
}
$(".modal-body").show();
$("#bodytable").hide();
});
});
$("#hide_popup").on("click",function(){
$(".modal-body").hide();
$("#bodytable").show();
});
});
CSS
.modal-body{
display:none;
position:absolute;
top:0;
left:0px;
}
DEMO : https://jsfiddle.net/daf2rLvh/3/

Categories