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

【问题标题】：How to highlight a column in html table on click using js or jquery?如何使用 js 或 jquery 在单击时突出显示 html 表中的列？
【发布时间】：2016-06-30 18:44:53
【问题描述】：

我正在尝试实现一个 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>

【问题讨论】：

Here 您可以看到如何选择与单击的同一列中的所有单元格。然后您需要做的就是将 backgroundColor 设置为所有这些单元格。
您的问题是关于突出显示列，但您的代码似乎建议尝试选择行。你想做的是哪一个？

标签： javascript jquery html

【解决方案1】：

您可以使用以下代码：

$('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')。

另外不要忘记在你的 css 文件中添加 .selected{ background-color: #ace; } 类。

这里是working example。

干杯！

【讨论】：

【解决方案2】：

请试试这个：

$("#dataTable tr td").click(function() {
  //Reset
  $("#dataTable td").removeClass("highlight");
  //Add highlight class to new column
  var index = $(this).index();
  $("#dataTable tr").each(function(i, tr) {
  	$(tr).find('td').eq(index).addClass("highlight");
  });
});

.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="dataTable">
  <tr><td>Data1</td><td>Data2</td></tr>
  <tr><td>Data1</td><td>Data2</td></tr>
  <tr><td>Data1</td><td>Data2</td></tr>
</table>

【讨论】：

【解决方案3】：

一个 fork Fisnik Tahiri 解决方案也支持 tr 选择（如果您更喜欢，则基于 css 或 jquery）

css:

.selected{ background-color: #ace; }
tr:hover{ background-color: #ace; }

Js：

$('td').on('mouseenter', function() {
    var $currentTable = $(this).closest('table');
    //var $row = $(this).closest('tr');
    var index = $(this).index();

    //clean
    $currentTable.find('td').removeClass('selected');


    //select row if you want use js
    //$currentTable.find('tr').removeClass('selected');
    //$row.addClass('selected');


    //select column
    $currentTable.find('tr').each(function() {
       $(this).find('td').eq(index).addClass('selected');
    });
});

working example

【讨论】：

我是如何写的：“也支持 tr 选择”这可以通过这个 css 行实现：tr:hover{ background-color: #ace;或者如果有人更喜欢 jquery 解决方案（必须从这两行中删除 cmets） $currentTable.find('tr').removeClass('selected'); $row.addClass('selected');

【解决方案4】：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>onclick highlight</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

 <script>
 $( document ).ready(function() {
     $( ".table tr" ).click(function(){
         $(".table tr" ).css("background-color","white");
         $(this).css("background-color","green");
     });
 });

 </script>
 </head>

 <body>
    <table class="table">
       <tr>
           <td>Date1</td>
           <td>Date2</td>
           <td>Date3</td>
      </tr>
      <tr>
           <td>Date1</td>
           <td>Date2</td>
           <td>Date3</td>
      </tr>
      <tr>
          <td>Date1</td>
          <td>Date2</td>
          <td>Date3</td>
      </tr>
     </table>
  </body>
  </html>

【讨论】：

试图选择列...而不是行