如何隐藏表列，但仍与Click事件一起使用？ （jQuery数据表）

Question

我从数据源中获取了一个RecordID和一个Title。 我只想在屏幕上显示“标题”列，但是我需要将行中的RecordID用于click事件。 因此，我将它们都拉到表中，并且希望隐藏RecordID。

我有一个用ajax源填充的表，因此可以动态创建数据的<tr>和<td>标记。 它们不是代码的一部分，所以我不能简单地添加一个可以用CSS隐藏的类。

<table id="example">
    <thead>
        <tr>
            <th>RecordID</th>
            <th>TITLE</th>
        </tr>
    </thead>
    <tbody>
        <!---Data and tags are dynamically generated--->
    </tbody>
</table>

DataTables文档列出了添加函数oTable.fnSetColumnVis( 0, false )或"bVisible":false属性的几个选项。 这两种方法都可以很好地隐藏我的列，但是基于该列的单击事件将不再起作用。

这是我正在使用的点击事件。

$('#example').on('dblclick', 'tr', function(event) {
 var td = $('td', this);
 var RecordID= $(td[0]).text();
});

因此，您可以看到它正在访问索引0（该行的第一个td或列）。隐藏该列后，另一个td变为索引0。我仍然需要该RecordID列才能从行中获取信息，但是我不知道不想在屏幕上显示它。 有任何想法吗？

Answer 1

我通过在声明表时添加一个类来弄清楚。

$(document).ready(function() {
var oTable = $('#example').dataTable( {
    "bJQueryUI": true,
    "bProcessing": false,
    "bServerSide": false,
    "bFilter":false, 
    "bPaginate":false, 
    "bInfo":false, 
    "bSort":false,
    "bAutoWidth":false,
    "sAjaxSource": "datasource.cfm",
    "aoColumns": [
        { "mData": "RecordID", "sClass":"testclass" },
        { "mData": "TITLE" }
    ]
});
 });

然后的CSS

.testclass {
display:none;
}

之后，JQuery仍然可以工作。