如何使用js或jquery突出显示html表中的列？
我正在尝试实现一个javascript，它将突出显示单击html表中的列。如下面的行高亮显示我尝试使用相同的table.columns但table.columns不存在。有没有使用jquery突出显示html表中的列？
突出显示行的工作代码：表格突出显示POC
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; } } } } table { border-spacing: 0px; } td { border: 1px solid #bbb; padding: 0.2em; } Data1 Data2 Data1 Data2 Data1 Data2
您可以使用以下代码：
$('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; } 在yor css文件中的类。
这是工作示例 。
干杯!
请试试这个：
$("#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; }
Data1 Data2 Data1 Data2 Data1 Data2
叉式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'); }); });
工作实例
onclick highlight Date1 Date2 Date3 Date1 Date2 Date3 Date1 Date2 Date3