2016-06-01 19 views
0

Ich brauche eine Möglichkeit, eine Spalte basierend auf seinem Index zu greifen. Die Indexnummer lautet <td> und gibt cellIndex zurück. Der Grund, warum ich das tun möchte, ist so, dass ich die Klasse <col> greifen und sie auf alle <td> s anwenden kann. Jede <td> benötigt die Klasse, die seit ich eine Bibliothek benutze (List.js) benutzt und ich kann keine Sortierung/Filterung/Suche durchführen, wenn die einzelnen <td> s nicht entsprechend beschriftet sind (leider hat es 'gewonnen'). t funktionieren, wenn nur die <col> s sie haben). Auch die <col> s hat keine anderen Attribute hinzugefügt wie IDs, Namen, usw.JavaScript - Holen Sie sich Tabellenspalte aus Index

function addClassesToCells(table) { 
     var col = ; // hoping to identify col using index here 
     var classname = col.className; 

     // rest of function 
    } 

function getIndex() { // test function to find index 
    document.addEventListener("click", function (e) { 
     e = e || window.event; 
     var target = e.target || e.srcElement; 
     var td = "TD"; 

     if (target.tagName == td) { 
      console.log(target.cellIndex); 
     } 

    }, false); 
} 

Das Ziel ist immer all <td> s unter einem bestimmten Klasse anzuwenden, so, wenn es andere/bessere Möglichkeiten zu tun das, dann begrüße ich alle. Vielen Dank.

+0

Sie haben die Klassen Zugabe noch nicht versucht, dann ist es schwer zu sagen, welcher Teil Sie Schwierigkeiten mit –

+0

sind mit Was ist Ihr („* [MCVE] *“) HTML soweit es für die Frage? Soll die erste Funktion ein bestimmtes '

' Element oder 'HTMLTableElement' Knoten erhalten und dann automatisch die Spalten mit Klassennamen füllen? Wo ist dein eigener Versuch gescheitert? Wie ist es gescheitert, was hat es nicht getan? Was hat es getan, was es nicht hätte tun sollen? Was passiert mit '' zuerst zu zielen. – LaLaLottie

Antwort

1

Um die Liste der Spalten und Tds zu erhalten, verwenden Sie Abfragen und stimmen Sie mit den Indizes überein.

var table = document.querySelector('table'); 
 

 
var cols = table.querySelectorAll('col'); 
 

 
var trs = table.querySelectorAll('tr'); 
 

 
var tds = [].map.call(trs, tr => tr.querySelectorAll('td')); 
 

 
for (var i = 0; i < trs.length; i++) { 
 
    for (var j = 0; j < tds[i].length; j++) { 
 
    tds[i][j].className = cols[j].className; 
 
    } 
 
}
.a { 
 
    color: red; 
 
} 
 
.b { 
 
    color: blue; 
 
} 
 
.c { 
 
    color: green; 
 
}
<table> 
 
    <colgroup> 
 
    <col class="a" /> 
 
    <col class="b" /> 
 
    <col class="c" /> 
 
    </colgroup> 
 
    <tr> 
 
    <td>Lime</td> 
 
    <td>Lemon</td> 
 
    <td>Orange</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Green</td> 
 
    <td>Yellow</td> 
 
    <td>Orange</td> 
 
    </tr> 
 
</table>

+0

Danke, ich mag diesen Ansatz wirklich. Ich habe etwas Verwirrung: Ich denke, ich frage mich, warum wir nicht den Schritt überspringen konnten, indem wir die 'tr's sammelten und später in der Funktion über sie hinausgingen. Wenn ich das ausgelassen habe und einfach alle 'td's der Tabelle habe, würde ihr Index/i nicht immer mit dem j der' col's übereinstimmen? Was ist der Unterschied? – LaLaLottie

+0

Sie würden übereinstimmen, wenn Sie 'cols [i% cols.length]'. Das wäre auch ein gültiger Ansatz. Ich habe nur das 2d-Array verwendet, um es leichter zu verstehen, da es mit der Tabellenstruktur übereinstimmt –

Verwandte Themen
' oder '', Elementen, die mehrere Spalten mit dem 'colspan' Attribut/Eigenschaft? –

+0

@JuanMendes: Ich habe Probleme mit dem ersten Teil, wo es 'var col =' sagt. Das Anwenden von Klassen, auf die ich nicht gekommen bin, seit ich versuche, spezifische '' s unter einer '