如何使用js或jquery突出顯示html表中的列單擊？

我想實現一個JavaScript，它將突出顯示在click.HTML表中的列的列。作爲下面的行高亮的工作示例，我試圖使用相同的table.columns但table.columns不存在。是任何是要突出使用jQuery的HTML表中的列？如何使用js或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>

來源

2016-06-30 soumitra chatterjee

[Here]（http://stackoverflow.com/questions/14061123/jquery-selector-to-grab-cells-in-the-same-column）您可以看到如何從點擊的同一列中選擇所有單元格。然後，您需要做的就是將backgroundColor設置爲所有這些單元格。 – TheWanderingMind

您的問題是關於突出顯示列，但您的代碼似乎建議嘗試選擇行。你想要做的是哪一項？ –

您可以使用下面的代碼：

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

另外不要忘了在yor css文件中添加.selected{ background-color: #ace; }類。

這裏是working example。

乾杯！

來源

2016-06-30 19:21:07

請試試這個：

$("#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) { 
 
    \t $(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>

來源

2016-06-30 19:02:43

-1

<!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>

來源

2016-06-30 19:12:47

試圖選擇列...不行 –

甲叉Fisnik塔希麗溶液也支持TR選擇（基於CSS或jquery的，如果你preferir）

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

來源

2017-07-31 12:33:38 Alessandro

我怎麼寫：「以支持tr選擇」這是可能的這個css行： tr：hover {background-color：#ace; } 或者如果有人更喜歡jQuery解決方案（必須從這兩行刪除評論） $ currentTable.find（'tr'）。removeClass（'selected'）; $ row.addClass（'selected'）; – Alessandro

如何使用js或jquery突出顯示html表中的列單擊？

回答

相關問題