我的网络项目面临(相对)简单的问题。
我使用Jquery和DataTables插件有一个漂亮的交互式表格,这是迄今为止的结果:
Heberger image http://img11.hostingpics.net/pics/587037Capturedcran20140428142445.jpg
我想做什么:
单击表格的任何单元格将显示一条警告,说明"您选择了ID idofsequence "的序列 Nameofsequence 。
以下是我到目前为止:
$("#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)
});
它有效,我有警报显示:
Hebergeur d'image http://img11.hostingpics.net/pics/315955Capturedcran20140428143534.jpg
问题是:
我希望在表的最后一列例外表格上激活此功能(在这种情况下,它是" Action"列)。 />
根据一些文档,我试过这个:
$("#table_sequences td:not(:last-child)").on('click', function()
// Rest of same code as above
但警告信息不会显示2个变量中的任何内容。但是,最后一栏不会像预期的那样显示弹出窗口。我怀疑细胞的选择有问题
有什么想法?
谢谢!
答案 0 :(得分:3)
<强>更新强>
$("#table_sequences td:not(:last-child)").on('click', function()
是正确的,但您必须将var colonneSelected = $('td', this);
替换为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)
});
});
<强> Demo Link 强>
答案 1 :(得分:0)
为什么不为所有可点击的单元格分配一个类,然后点击这些单元格。
像这样:
var oTable = $('#table_sequences').dataTable({
"bServerSide": true,
"sAjaxSource": "records.json",
"sAjaxDataProp": "aaData",
"bProcessing": true,
"aoColumns": [{
"mData": "id",
"sWidth": "5%",
"sClass": "clickable"
}, {
"mData": "title",
"sClass": "clickable"
}, {
"mData": null,
mRender: function(data, type, full) {
return '<button>Click me</button>'
}
}],
"fnInitComplete": function(oSettings) {
$(".clickable").on('click', function() {
var message;
var idSequenceChosen = this.parentElement.cells[0].textContent;
var nomSequenceChosen = this.parentElement.cells[1].textContent;
message = "You have chosen the " + nomSequenceChosen + " sequence with ID of " + idSequenceChosen;
alert(message)
});
}
})
试试这个Plunker