Question

我的网络项目面临（相对）简单的问题。
我使用Jquery和DataTables插件有一个漂亮的交互式表格，这是迄今为止的结果：

Heberger image http://img11.hostingpics.net/pics/587037Capturedcran20140428142445.jpg

我想做什么：
单击表格的任何单元格将显示一条警告，说明＆＃34;您选择了ID idofsequence ＆＃34;的序列 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

问题是：
我希望在表的最后一列例外表格上激活此功能（在这种情况下，它是＆＃34; Action＆＃34;列）。 /> 根据一些文档，我试过这个：

$("#table_sequences td:not(:last-child)").on('click', function()
// Rest of same code as above

但警告信息不会显示2个变量中的任何内容。但是，最后一栏不会像预期的那样显示弹出窗口。我怀疑细胞的选择有问题有什么想法？
谢谢！

Answer 1

<强>更新

$("#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

Answer 2

为什么不为所有可点击的单元格分配一个类，然后点击这些单元格。

像这样：

    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

JQuery：从最后一行获取Datatable数据

2 个答案: