We Keep Coding

Set Buttons to run Different Scripts

I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here are the 2 scripts that I would like to run when the Select button is clicked in either table (first script for the top table and 2nd script for the 2nd table):
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
var itemID = $(this).closest('tr').attr('id');
// Create a reference to $(this) here:
$this = $(this);
$.post('updateAccessories.php', {
itemID: itemID
}, function(data) {
data = JSON.parse(data);
if (data.error) {
var ajaxError = (data.text);
var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(errorAlert);
$("#alert_ajax_error").show();
return; // stop executing this function any further
} else {
if ($this.closest('tr').hasClass("success")) {
$this.closest('tr').removeClass("success");
} else {
$this.closest('tr').addClass("success");
}
}
}).fail(function(xhr) {
var httpStatus = (xhr.status);
var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the Help Desk';
$this.closest('tr').addClass("warning");
$('#alert_ajax_error').html(ajaxError);
$("#alert_ajax_error").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
At the moment clicking either button runs both scripts which I can understand as they both meet the criteria for:
$('button.btn-success:not([type="submit"])').click(function() {
but I'm not experienced enough to know how to make the necessary changes to have each button run a different script here?

A very basic way to differentiate between buttons would be to add an attribute called "id" to them.
<button id="button1" type="button" class="btn btn-success btn-sm">Select</button>
<button id="button2" type="button" class="btn btn-success btn-sm">Select</button>
Now you can reference each like this:
$('#button1').click(function() { ...
$('#button2').click(function() { ...

If you can change the markup then add a class from main and another for accessories in the button and do $('button.main') and $('button.accessories') instead of $('button.btn-success:not([type="submit"])')
If not then you need to be able to discern one from another.
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function(e) {
var t = $(e.target).parent().parent().parent().parent().parent().prev()[0].innerHTML;
if(t.indexOf("Main") !== -1) {
// Has MAIN - put your main code in here
console.log("main stuff");
} else if (t.indexOf("Accessories") !== -1) {
// It's Accessories - put your accessories code in here
console.log("accessories stuff");
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>

2 Tables on one page - buttons on Rows to run different script

I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here's my script that runs when the Select button from the first table is clicked:
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
Not sure how to have another version of this that only runs when the Select button from the 2nd table is clicked?

Was interrupted writing the answer but you could try something like this:
const selectHelper =
($me,classToAdd,inputSelector) => {
$me.parents("table")
.eq(0)
.find("tr")
.removeClass("success warning danger");
const id =
$me.parents("tr")
.eq(0)
.addClass(classToAdd)
.attr("id")
;
$(inputSelector).val(id);
}
;
const clickActions = {
one:(e,$me)=>
selectHelper(
$me
,"warning"
,"#inputidOne"
)
,two:(e,$me)=>
selectHelper(
$me
,"success"
,"#inputidTwo"
)
};
$(document.body)
.on(
"click"
,`[data-action-click]`
,e=>{
const action = e.target.getAttribute("data-action-click");
if(typeof clickActions[action] === "function"){
clickActions[action](e,$(e.target))
}
debugger;
}
)
The button needs a data-action-click attribute that has the name of the function you want to execute when clicked:
<button
type="button"
data-action-click="two"
class="btn btn-success btn-sm"
>
Select
</button>

I believe this is what you're looking for:
$(document).ready(function() {
$("table:first").find('button[type!="submit"]').click(function() {
$("table:first").find("tr").removeClass("success warning danger");
$(this).parents("tr").addClass("success");
$("#productID").val($(this).parents("tr").attr("id"));
});
$("table").eq(1).find('button[type!="submit"]').click(function() {
$("table").eq(1).find("tr").removeClass("success warning danger");
//Do whatever color you want
$(this).parents("tr").addClass("warning");
//Wasn't provided this snippet so I just made up accessoryID
$("#accessoryID").val($(this).parents("tr").attr("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
.eq This returns a jQuery object from a list of jQuery objects by index, whereas indexing with brackets will return HTML content.
P.S. You don't really need class="" and scope="col" in the table, the HTML I provided doesn't have those. The only real point of the class attribute is to assign multiple CSS attributes easily, unless you're using classes as selectors. Same with scope, I've made many tables and never used scope.
Also, when you do a thead, you need to add a tr before you add the headers. I fixed that in the code above. (Yes, this does mean that tables support multiple header rows).

Everytime i clicked on .approvers > a I can't get the tr id name

I have this code
<tr class="job-order__row" id="accounting" style="display:none;">
<td>1</td>
<td>Doe</td>
<td>John</td>
<td>Accounting Personnel</td>
<td>
<div class="actions pull-right approvers">
<i class="fa fa-close" title="remove approvers"></i>
</div>
</td>
</tr>
<tr class="job-order__row" id="hr" style="display:none;">
<td>2</td>
<td>Doe</td>
<td>Luke</td>
<td>HR Personnel</td>
<td>
<div class="actions pull-right approvers">
<i class="fa fa-close" title="remove approvers"></i>
</div>
</td>
</tr>
<tr class="job-order__row" id="crm" style="display:none;">
<td>3</td>
<td>Doe</td>
<td>Mark</td>
<td>CRM Personnel</td>
<td>
<div class="actions pull-right approvers">
<i class="fa fa-close" title="remove approvers"></i>
</div>
</td>
</tr>
and the javascript/jquery code
$(document).on('click', '.approvers > a', function(e) {
e.preventDefault();
var $id = $('.approvers > a').parents('tr').attr('id');
$('#'+$id).hide();
});
The problem is, when i try to click on any of .approvers > a this part here
$('.approvers > a').parents('tr').attr('id'); of the code only return the Id name "crm".
What I want to do is everytime i clicked on .approvers > a I will get the tr id name.
Anyone has the same problem?
Thanks

What #Tushar said is use $(this) for refer to the element clicked and closest() for get the first parent element.
$(document).on('click', '.approvers > a', function(e) {
e.preventDefault();
var $id = $(this).closest('tr').attr('id');
alert($id)
$('#'+$id).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="job-order__row" id="accounting" style="">
<td>1</td>
<td>Doe</td>
<td>John</td>
<td>Accounting Personnel</td>
<td>
<div class="actions pull-right approvers">
<i class="fa fa-close" title="remove approvers"></i>click
</div>
</td>
</tr>
<tr class="job-order__row" id="hr" style="">
<td>2</td>
<td>Doe</td>
<td>Luke</td>
<td>HR Personnel</td>
<td>
<div class="actions pull-right approvers">
<i class="fa fa-close" title="remove approvers"></i>click
</div>
</td>
</tr>
<tr class="job-order__row" id="crm" style="">
<td>3</td>
<td>Doe</td>
<td>Mark</td>
<td>CRM Personnel</td>
<td>
<div class="actions pull-right approvers">
<i class="fa fa-close" title="remove approvers"></i>click
</div>
</td>
</tr>
</table>

Use below code it will give you clicked item tr/row id.
$("table tr").on('click', function (e) {
console.log(e.currentTarget.id);
});

How get the value in <tr>

I need to get the text in <tr>. This is my html code:
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente"><tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr></tbody>
</table>
I need to extract the first <td> in <tr> that is "prova" in this example so I use this jquery code:
$('#tbody_aggiungi_utente').children('tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+" Tabella "+JSON.stringify($(this)));
//array_user.push($(this).attr('id').replace('aggiungi', ''));
});
But it doesn't work because it prints me TABELLA 0 Tabella {"0":{},"context":{},"length":1}
Anyone can help me?

$('#tbody_aggiungi_utente').children('tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+" Tabella "+$(this).first().text());
//array_user.push($(this).attr('id').replace('aggiungi', ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
</tbody>
</table>

You should use a better selector instead of children. Then you need do select the td inside your each.
$('#tbody_aggiungi_utente tr').each(function(i) {
var firstTd = $("td:eq(0)", this);
console.log("TABELLA " + JSON.stringify(i) + " Tabella " + JSON.stringify(firstTd.text()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
Or you loop the td's directly:
$('#tbody_aggiungi_utente tr td:first-of-type').each(function(i) {
console.log("TABELLA " + JSON.stringify(i) + " Tabella " + JSON.stringify($(this).text()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
<tr id="aggiungiprova">
<td>prova 2</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>

replace each(function(i) with each(function(i,v) and then console.log( $(v).text().trim());
Output will be 'prova'
$('#tbody_aggiungi_utente').children('tr').each(function(i,v) {
console.log( $(v).text().trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm">
<i class="fa fa-times" aria-hidden="true"></i></button>
</td>
</tr>
</tbody>
</table>

Use children.
$(this).children('td:eq(0)').html());
$('#tbody_aggiungi_utente > tr').each(function(i) {
console.log("TABELLA " + JSON.stringify(i)+
" Tabella "+JSON.stringify($(this).children('td:eq(0)').html()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
<tr id="aggiungiprova1"><td>prova1</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
</tbody>
</table>

Take a look at CSS Selectors. jQuery can select elements using the same methods.
console.log(jQuery("#aggiungiprova td:first-child"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>

This should work...
a = $('#tabella_username_aggiunti tr th')
console.log(a.text())
//or
a.each(function(a, el) {
console.log($(el).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
<thead>
<tr>
<th>Username</th>
<th>Cancella</th>
</tr>
</thead>
<tbody id="tbody_aggiungi_utente">
<tr id="aggiungiprova">
<td>prova</td>
<td>
<button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>

$("#aggiungiprova td").first().text();
Gives the content of the first td in the tr named "aggiungiprova".
If you need to get all names in the entire list, then:
var names = [];
$("#tabella_username_aggiunti tr").each(function(){
names.push( $("td",this).first().text());
});
// names is now an array of all names
Or you name [sic] all name TDs with class and iterate them for easier-to-read code and faster execution:
<table>
<tr><td class="name-cell">My Name</td><td>other things</td></tr>
<tr><td class="name-cell">My Name</td><td>other things</td></tr>
</table>
JS:
$('.name-cell').each(function(){
// $(this).text()
});

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/