1

我有一个类似的表：

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>

我想要做的是放置某种图像或链接来隐藏和显示<th>. 当用户单击隐藏列时，我想将内部文本放在<th>div 中，当单击 div 时，我希望用户能够单击他们选择的列并将其放回表并将其从 div 中删除。

我得到了数据表插件，在网站上，它有一个隐藏/显示列的示例，但带有外部链接。我能够添加一个链接来隐藏/显示一列，但这是我的问题：

我不知道如何获取被点击的索引或列。我不知道如何使用 jquery 从 div 中删除它。当我单击显示/隐藏时，它会将其放入 div 中，但随后每次单击都会重复，我也可以在 div 中单击它，它会根据当前状态在表格中显示/隐藏。

  <script type="text/javascript">

        $(document).ready(function() {
            $('#datatable').dataTable();

            $('.showhide').live('click', function() {

                var index = $('#datatable th').index();

                fnShowHide(index);
            });
        });

        function fnShowHide(iCol) {
            var oTable = $('#datatable').dataTable();

            var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;

            oTable.fnSetColumnVis(iCol, bVis ? false : true);

            var index = $('#datatable td').index();
            console.log(index);

            $('#columns').append('<a href="#">' + oTable.fnSettings().aoColumns[index].sTitle + '<a/>');

        }
    </script>

<div id="columns"><h4>Columns</h4></div>
    <table id="datatable" class="display">
    <thead>
    <tr>
    <th></th>
    <th></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
    </table>

我遗漏了一些表格数据。

4

1 回答 1

0

我有一个展开折叠行的数据表，我如何处理知道点击了哪一行是

1）为每个TR行分配一个元素id，aaData包含我的数据，aaData第一个位置的节点是我的唯一标识符（如果它是第一个节点，它将是aaData [0]）

$( '#records' ).dataTable({
               "bJQueryUI": true, 
               "fnRowCallback": function( nRow, aaData, iDisplayIndex, iDisplayIndexFull ) { 
                                                $(nRow).attr('id', aaData[1]);
                                                return nRow; 
                                                            } ,
               "aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] }],
               "aaSorting": [[ 1, "asc" ]]
 });

现在您的后续事件可以引用 TR id

$('#records tbody td img').on('click', function () {
    var nTr = this.parentNode.parentNode;
    if ( this.src.match('details_close') )
    {
        /* This row is already open - close it */
        this.src = "../ci/images/details_open.png";
        dataTable.fnClose( nTr );
    } ... });

*请注意，如果它是数字的，您可能想先附加一些文本，仅数字元素 id 会产生 javascript/jquery 问题，我认为不符合 html

于 2013-05-03T14:44:24.753 回答