javascript-如何在使用js或jquery单击时突出显示html表中的列？

我正在尝试实现一个javascript,它将在点击时突出显示html表格中的列.作为下面突出显示行的工作示例,我尝试将其与table.columns一起使用,但table.columns不存在.是否有使用jQuery突出显示html表中的列？

突出显示行的工作代码：


            表重点POC

        <script>

            function highlight() {
                var table = document.getElementById('dataTable');
                for (var i = 0; i < table.rows.length; i++) {
                    table.rows[i].onclick = function () {
                        if (!this.hilite) {
                            this.origColor = this.style.backgroundColor;
                            this.style.backgroundColor = '#BCD4EC';
                            this.hilite = true;
                        }
                        else {
                            this.style.backgroundColor = this.origColor;
                            this.hilite = false;
                        }
                    }
                }
            }

        </script>
        <style>


            table {
                border-spacing: 0px;
            }

            td {
                border: 1px solid #bbb;
                padding: 0.2em;
            }
        </style>
    </head>
    <body>
        <table id="dataTable">
            <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
            <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
            <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
        </table>
    </body>
</html>

解决方法:

您可以使用以下代码：

$('td').on('click', function() {
    var $currentTable = $(this).closest('table');
    var index = $(this).index();
    $currentTable.find('td').removeClass('selected');
    $currentTable.find('tr').each(function() {
        $(this).find('td').eq(index).addClass('selected');
    });
});

只需将其放在您的JS文件中,它将在所有可用表上独立运行.如果只想在特定表上使用它,只需将初始选择器更改为$(‘#myTable td’).

同样不要忘记添加.selected {background-color：#ace; }在您的CSS文件中.

这是working example.

干杯!

相关推荐