Javascript DataTables自定义标题单击事件 $（文档）.ready（函数（）{ $（“#数据表响应”）。数据表（{ columnDefs：[{ 目标：“无排序”，可排序：false }] } ); } ); 名称 国家 年龄 电子邮件 马特 澳大利亚 22 matt@gmail.com 纳丁 印度尼西亚 34 nadine@outlook.com

如何将专栏年龄和电子邮件合并到国家/地区？单击国家/地区的标题时，tbody将显示相应的列。

您可以参考我的解决方案。希望能帮上忙，我的朋友：

<script type="text/javascript">
        $(document).ready(function() {
            $('#datatable-responsive').DataTable( {
                columnDefs: [{
                    targets: 'no-sort', orderable: false
                }]
            } );
        } );
    </script>

    <table id="datatable-responsive" class="table dt-responsive nowrap table-hover" cellspacing="0" width="100%">
        <thead>
            <th>Name</th>
            <th class="no-sort">Country</th>
            <th>Age</th>
            <th>Email</th>
        </thead>
        <tbody>
            <tr>
                <td>Matt</td>
                <td>Australia</td>
                <td>22</td>
                <td>matt@gmail.com</td>
            </tr>
            <tr>
                <td>Nadine</td>
                <td>Indonesia</td>
                <td>34</td>
                <td>nadine@outlook.com</td>
            </tr>
        </tbody>
    </table>

名称
国家
年龄
电子邮件
马特
澳大利亚
22
matt@gmail.com
纳丁
印度尼西亚
34
nadine@outlook.com
$（文档）.ready（函数（）{
var=3；
//第一，隐藏年龄和电子邮件列
$（“#数据表响应td:n子项（3），第n:n子项（3）”.hide（）；
$（“#数据表响应td:n子项（4），第n子项（4）”.hide（）；
$（'.showHide'）。在（'click'，函数（）{
//第一次单击“显示年龄和隐藏国家/地区”列
如果（columnShow==3）{
$（“#数据表响应td:n子项（3），第n:n子项（3）”.show（）；
$（“#数据表响应td:n子级（2），th:n子级（2）”.hide（）；
columnShow=4；
返回；
}
//第二次单击“显示电子邮件和隐藏年龄”列
如果（columnShow==4）{
$（“#数据表响应td:n子项（4），th:n子项（4）”.show（）；
$（“#数据表响应td:n子项（3），第n:n子项（3）”.hide（）；
columnShow=2；
返回；
}
//下一步单击“显示国家/地区和隐藏电子邮件”列
如果（columnShow==2）{
$（“#数据表响应td:n子项（2），th:n子项（2）”.show（）；
$（“#数据表响应td:n子项（4），第n子项（4）”.hide（）；
columnShow=3；
返回；
}
});
});

如何将列名和电子邮件合并到国家/地区？你是说，

colspan

？@AravindhGopi不像dropbox。当用户单击标题时，如果它们有选项，它们将更改为不同的列。例如，只有2个标题。但第二个标题将显示国家，当用户单击时，它将更改为年龄，当用户再次单击时，它将更改为电子邮件，当用户再次单击时，它将再次更改为国家。它将从那里循环，我知道，这意味着表的第一个标题只有两列：Name和Country。单击国家标题后，它将隐藏国家并显示年龄列，对吗？@Tomato32是的，这正是我想要的it@Athira：是的。只是我的建议。你可以编辑：）@Athira:你可以解释得更清楚。第一次点击，第二次点击后发生了什么。。。

<table id="datatable-responsive" class="table dt-responsive nowrap table-hover" style="table-layout: fixed;">
    <thead>
    <tr>
        <th>Name</th>
        <th class="no-sort showHide">Country</th>
        <th class="showHide" >Age</th>
        <th class="showHide" >Email</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>Matt</td>
            <td>Australia</td>
            <td>22</td>
            <td>matt@gmail.com</td>
        </tr>
        <tr>
            <td>Nadine</td>
            <td>Indonesia</td>
            <td>34</td>
            <td>nadine@outlook.com</td>
        </tr>
    </tbody>
</table>

$(document).ready(function () {

        var columnShow = 3;

        //the first, hide Age and Email column
        $('#datatable-responsive td:nth-child(3),th:nth-child(3)').hide();
        $('#datatable-responsive td:nth-child(4),th:nth-child(4)').hide();

        $('.showHide').on('click', function () {

            //the first click show Age and hide Country column
            if (columnShow === 3) {
                $('#datatable-responsive td:nth-child(3),th:nth-child(3)').show(); 
                $('#datatable-responsive td:nth-child(2),th:nth-child(2)').hide();
                columnShow = 4;
                return;
            }

            //the second click show Email and hide Age column
            if (columnShow === 4) {
                $('#datatable-responsive td:nth-child(4),th:nth-child(4)').show();
                $('#datatable-responsive td:nth-child(3),th:nth-child(3)').hide();
                columnShow = 2;
                return;
            }

            //the next click show Country and hide Email column
            if (columnShow === 2) {
                $('#datatable-responsive td:nth-child(2),th:nth-child(2)').show();
                $('#datatable-responsive td:nth-child(4),th:nth-child(4)').hide();
                columnShow = 3;
                return;
            }
        });
    });