Wie markieren Sie eine Spalte in der HTML-Tabelle beim Klicken mit js oder jquery?

Ich versuche, ein Javascript zu implementieren, das die Spalte in einer HTML-Tabelle auf Click hervorhebt. Als das unten stehende Arbeitsbeispiel für Zeilenhighlight habe ich versucht, dasselbe mit table.columns zu verwenden, aber table.columns existiert nicht jeder war die Spalte in HTML-Tabelle mit jquery zu markieren?Wie markieren Sie eine Spalte in der HTML-Tabelle beim Klicken mit js oder jquery?

Arbeits Code für die Hervorhebung Reihe: Tabelle 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>

Quelle

2016-06-30 soumitra chatterjee

[Hier] (http://stackoverflow.com/questions/14061123/jquery-selector-to-grab-cells-in-the-same-column) Sie können sehen, wie Sie alle Zellen aus derselben Spalte auswählen, auf die geklickt wurde. Dann müssen Sie lediglich backgroundColor auf alle diese Zellen setzen. – TheWanderingMind

Ihre Frage bezieht sich auf die Hervorhebung der Spalte, aber Ihr Code scheint zu versuchen, Zeilen auszuwählen. Welches ist es, was du versuchst zu tun? –

Sie können den folgenden Code verwenden:

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

Nur diese Datei auf Ihrem JS setzen und es wird unabhängig auf allen verfügbaren Tabellen zu arbeiten. Wenn Sie es nur für eine bestimmte Tabelle verwenden möchten, ändern Sie einfach die anfängliche Auswahl auf $('#myTable td').

Vergessen Sie auch nicht, die .selected{ background-color: #ace; } Klasse in Ihrer CSS-Datei hinzuzufügen.

Hier ist die working example.

Prost!

Quelle

2016-06-30 19:21:07

Bitte versuchen Sie dies:

$("#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>

Quelle

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>

Quelle

2016-06-30 19:12:47

versucht Spalte auszuwählen ... nicht Zeile –

Eine Gabel Fisnik Tahiri Lösung

css auch die tr Auswahl (auf CSS oder jquery wenn Sie preferir basiert) zu unterstützen:

.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

Quelle

2017-07-31 12:33:38 Alessandro

Wie ich schrieb: "um auch die tr Auswahl zu unterstützen" das ist möglich durch diese css Zeile: tr: hover {Hintergrundfarbe: #ace; } oder wenn jemand eine jquery Lösung vorzieht (muss Kommentare aus dieser zwei Zeile entfernen) $ currentTable.find ('tr'). RemoveClass ('selected'); $ row.addClass ('ausgewählt'); – Alessandro

Wie markieren Sie eine Spalte in der HTML-Tabelle beim Klicken mit js oder jquery?

Antwort

Verwandte Themen