如何使用js或jquery突出显示html表中的列点击？(How to highlight a column in html table on click using js or jquery?)

我试图实现一个JavaScript，它将突出显示在click.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>

I am trying to implement a javascript which will highlight the column in an html table on click.As the below working example for row highlight i tried to use the same with table.columns but table.columns doesn't exist.Is there any was to highlight the column in html table using jquery?

Working code for highlighting row: Table Highlight 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; } .selected{ background-color: #ace; }在你的css文件中。

这是一个工作示例 。

干杯!

You can use the following code:

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

Just put this on your JS file and it will work on all available tables independently. In case you want to use it only on a specific table, just change the initial selector to $('#myTable td').

Also dont forget to add the .selected{ background-color: #ace; } class in yor css file.

Here is the working example.

Cheers!

如何使用js或jquery突出显示html表中的列点击？(How to highlight a column in html table on click using js or jquery?)

我试图实现一个JavaScript，它将突出显示在click.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>

I am trying to implement a javascript which will highlight the column in an html table on click.As the below working example for row highlight i tried to use the same with table.columns but table.columns doesn't exist.Is there any was to highlight the column in html table using jquery?

Working code for highlighting row: Table Highlight 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; } .selected{ background-color: #ace; }在你的css文件中。

这是一个工作示例 。

干杯!

You can use the following code:

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

Just put this on your JS file and it will work on all available tables independently. In case you want to use it only on a specific table, just change the initial selector to $('#myTable td').

Also dont forget to add the .selected{ background-color: #ace; } class in yor css file.

Here is the working example.

Cheers!