如何隱藏表列，但仍與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仍然可以工作。