I'm facing a (relatively) simple problem with my web project.
I'm using Jquery and DataTables plugin to have a good looking and interactive table, here is the result so far :
(source: hostingpics.net)
What I would like to do :
Clicking on any cell of the table would show an alert saying "You chosen the sequence Nameofsequence of ID idofsequence".
Here is what I have so far :
$("#table_sequences tbody tr").on('click', function(){
var message;
var colonneSelected = $('td', this);
var idSequenceChosen = $(colonneSelected[0]).text();
var nomSequenceChosen = $(colonneSelected[1]).text();
message = "You have chosen the "+nomSequenceChosen+" sequence with ID of "+idSequenceChosen;
alert(message)
});
And it works, I have the alert displaying :
(source: hostingpics.net)
The problem is :
I would like this feature to be activated on the table excepted on the last column of the table (in this case, it's the "Action" column).
According to some docs, I tried this :
$("#table_sequences td:not(:last-child)").on('click', function()
// Rest of same code as above
But the alert message won't show any content in the 2 variables. But, the last column won't show the popup as expected. I suspect something wrong in the selection of the cells.
Any idea ?
Thank you !
Updated:
$("#table_sequences td:not(:last-child)").on('click', function()
is correct, but you have to replace var colonneSelected = $('td', this);
with var colonneSelected = $(this).parent().find('td');
HTML
<table class="table table-bordered" id="table_sequences">
<thead>
<tr>
<th class="epic_center_text_h col-sm-1">ID</th>
<th class="epic_center_text_h col-sm-1">Nom</th>
<th class="epic_center_text_h col-sm-1">Date</th>
<th class="epic_center_text_h col-sm-1">Statut</th>
<th class="epic_center_text_h col-sm-1">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">12</td>
<td class="text-center">Création des utilisateurs</td>
<td class="text-center">2015-01-06</td>
<td class="bg-danger text-center">Failed <i class="glyphicon glyphicon-minus-sign"></i></td>
<td class="bg-success text-center"><a href="/epic/sequence?id=12&action=restart">Restart <i
class="glyphicon glyphicon-refresh"></i></a></td>
</tr>
<tr>
<td class="text-center">07</td>
<td class="text-center">Calcul de LA question</td>
<td class="text-center">2015-01-06</td>
<td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
<td class="bg-danger text-center"><a href="/epic/sequence?id=07&action=stop">Stop <i
class="glyphicon glyphicon-stop"> </i></a> /
<a href="/epic/sequence?id=07&action=pause"> Pause <i
class="glyphicon glyphicon-pause"></i></a></td>
</tr>
<tr>
<td class="text-center">05</td>
<td class="text-center">Sauvegarde des données</td>
<td class="text-center">2014-12-22</td>
<td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
<td class="bg-danger text-center"><a href="/epic/sequence?id=05&action=stop">Stop <i
class="glyphicon glyphicon-stop"> </i></a> /
<a href="/epic/sequence?id=05&action=pause"> Pause <i
class="glyphicon glyphicon-pause"></i></a></td>
</tr>
<tr>
<td class="text-center">11</td>
<td class="text-center">Nettoyage des fichiers</td>
<td class="text-center">2014-09-24</td>
<td class="bg-info text-center">Paused <i class="glyphicon glyphicon-pause"></i></td>
<td class="bg-success text-center"><a href="/epic/sequence?id=11&action=resume">Resume <i
class="glyphicon glyphicon-play"></i></a></td>
</tr>
<tr>
<td class="text-center">01</td>
<td class="text-center">Calcul Red Shift</td>
<td class="text-center">2014-09-24</td>
<td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
<td class="bg-danger text-center"><a href="/epic/sequence?id=01&action=stop">Stop <i
class="glyphicon glyphicon-stop"> </i></a> /
<a href="/epic/sequence?id=01&action=pause"> Pause <i
class="glyphicon glyphicon-pause"></i></a></td>
</tr>
<tr>
<td class="text-center">08</td>
<td class="text-center">Refactorisation</td>
<td class="text-center">2014-09-24</td>
<td class="bg-info text-center">Paused <i class="glyphicon glyphicon-pause"></i></td>
<td class="bg-success text-center"><a href="/epic/sequence?id=08&action=resume">Resume <i
class="glyphicon glyphicon-play"></i></a></td>
</tr>
<tr>
<td class="text-center">02</td>
<td class="text-center">Calcul Dérive</td>
<td class="text-center">2014-09-22</td>
<td class="bg-danger text-center">Stopped <i class="glyphicon glyphicon-minus-sign"></i></td>
<td class="bg-success text-center"><a href="/epic/sequence?id=02&action=start">Start <i
class="glyphicon glyphicon-arrow-right"></i></a></td>
</tr>
<tr>
<td class="text-center">06</td>
<td class="text-center">Envoi des données</td>
<td class="text-center">2014-07-17</td>
<td class="bg-danger text-center">Stopped <i class="glyphicon glyphicon-minus-sign"></i></td>
<td class="bg-success text-center"><a href="/epic/sequence?id=06&action=start">Start <i
class="glyphicon glyphicon-arrow-right"></i></a></td>
</tr>
<tr>
<td class="text-center">03</td>
<td class="text-center">Calcul simple</td>
<td class="text-center">2014-04-12</td>
<td class="bg-info text-center">Paused <i class="glyphicon glyphicon-pause"></i></td>
<td class="bg-success text-center"><a href="/epic/sequence?id=03&action=resume">Resume <i
class="glyphicon glyphicon-play"></i></a></td>
</tr>
<tr>
<td class="text-center">04</td>
<td class="text-center">Calcul Mental</td>
<td class="text-center">2014-02-14</td>
<td class="bg-danger text-center">Failed <i class="glyphicon glyphicon-minus-sign"></i></td>
<td class="bg-success text-center"><a href="/epic/sequence?id=04&action=restart">Restart <i
class="glyphicon glyphicon-refresh"></i></a></td>
</tr>
<tr>
<td class="text-center">10</td>
<td class="text-center">Ecriture du rapport</td>
<td class="text-center">2014-02-03</td>
<td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
<td class="bg-danger text-center"><a href="/epic/sequence?id=10&action=stop">Stop <i
class="glyphicon glyphicon-stop"> </i></a> /
<a href="/epic/sequence?id=10&action=pause"> Pause <i
class="glyphicon glyphicon-pause"></i></a></td>
</tr>
<tr>
<td class="text-center">09</td>
<td class="text-center">Cuisson de choucroute</td>
<td class="text-center">2013-11-13</td>
<td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
<td class="bg-danger text-center"><a href="/epic/sequence?id=09&action=stop">Stop <i
class="glyphicon glyphicon-stop"> </i></a> /
<a href="/epic/sequence?id=09&action=pause"> Pause <i
class="glyphicon glyphicon-pause"></i></a></td>
</tr>
</tbody>
</table>
JS
$(document).ready(function() {
$(document).on('click', "#table_sequences td:not(:last-child)", function() {
var message;
var colonneSelected = $(this).parent().find('td');
var idSequenceChosen = $(colonneSelected[0]).text();
var nomSequenceChosen = $(colonneSelected[1]).text();
message = "You have chosen the " + nomSequenceChosen + " sequence with ID of " + idSequenceChosen;
alert(message)
});
});