Schleife durch Tabelle und extrahiere spezifische Zellen

Ich habe Schwierigkeiten, jQuery zu verwenden, um eine Tabelle zu durchlaufen, dann extrahiere spezifische Zellen.
Ich weiß, dass dies mit .each getan werden kann, ich habe keinen Code als Beispiel zu teilen, aber ich versuche, wie wir sprechen, ich bin nur auf der Suche nach einigen Vorschlägen. Ich werde jeden Code teilen, den ich mir vorstellen kann.Schleife durch Tabelle und extrahiere spezifische Zellen

Was wäre der beste Weg, dies zu erreichen?

Code Snippet:

<table id="tablemain" class="tableclass"> 
 
    <thead> 
 
    <tr> 
 
     <th>A</th> 
 
     <th>Site1</th> 
 
     <th>Site2</th> 
 
     <th>D</th> 
 
     <th>E</th> 
 
     <th>F</th> 
 
     <th>G</th> 
 
     <th>H</th> 
 
     <th>I</th> 
 
     <th>J</th> 
 
     <th>K</th> 
 
     <th style="width: 10%;">L</th> 
 
     <th>M</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="row0" class="parent"> 
 
     <td class="radioTableDetails awarded-td-background-color">Name1</td> 
 
     <td colspan="11">&nbsp;</td> 
 
     <td class="version-Link-Table even-td-TableDetails">&nbsp;</td> 
 
    </tr> 
 
    <tr id="row0" class="child"> 
 
     <td class="child-row-Table-Details"><strong>Arrival</strong></td> 
 
     <td class="even-td-TableDetails">06/06/2017 09:30</td> 
 
     <td class="odd-td-TableDetails">06/06/2017 16:00</td> 
 
     <td class="even-td-TableDetails">A</td> 
 
     <td class="odd-td-TableDetails">B</td> 
 
     <td class="even-td-TableDetails">D</td> 
 
     <td class="odd-td-TableDetails">E</td> 
 
     <td class="even-td-TableDetails">&nbsp;</td> 
 
     <td class="odd-td-TableDetails">F</td> 
 
     <td class="even-td-TableDetails">G</td> 
 
     <td class="odd-td-TableDetails">H</td> 
 
     <td class="even-td-TableDetails diff-td-text-color">I</td> 
 
     <td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td> 
 
    </tr> 
 
    <tr id="row0" class="child"> 
 
     <td class="child-row-Table-Details"><strong>Departure</strong></td> 
 
     <td class="even-td-TableDetails">06/06/2017 10:00</td> 
 
     <td class="odd-td-TableDetails">-</td> 
 
     <td class="even-td-TableDetails" colspan="9">-</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr id="row1" class="parent"> 
 
     <td class="radioTableDetails">Name2</td> 
 
     <td colspan="11">&nbsp;</td> 
 
     <td class="version-Link-Table even-td-TableDetails">&nbsp;</td> 
 
    </tr> 
 
    <tr id="row1" class="child"> 
 
     <td class="child-row-Table-Details"><strong>Arrival</strong></td> 
 
     <td class="even-td-TableDetails">06/06/2017 10:30</td> 
 
     <td class="odd-td-TableDetails">06/06/2017 17:00</td> 
 
     <td class="even-td-TableDetails">A</td> 
 
     <td class="odd-td-TableDetails">B</td> 
 
     <td class="even-td-TableDetails">D</td> 
 
     <td class="odd-td-TableDetails">E</td> 
 
     <td class="even-td-TableDetails">&nbsp;</td> 
 
     <td class="odd-td-TableDetails">F</td> 
 
     <td class="even-td-TableDetails">G</td> 
 
     <td class="odd-td-TableDetails">H</td> 
 
     <td class="even-td-TableDetails diff-td-text-color">I</td> 
 
     <td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td> 
 
    </tr> 
 
    <tr id="row1" class="child"> 
 
     <td class="child-row-Table-Details"><strong>Departure</strong></td> 
 
     <td class="even-td-TableDetails">06/06/2017 11:00</td> 
 
     <td class="odd-td-TableDetails">-</td> 
 
     <td class="even-td-TableDetails" colspan="9">&nbsp;-</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p>&nbsp;</p>

Das Ergebnis, das ich in einem Array oder Variable wollen:

Name1
1.Site 1 Ankunft
2.Site 1 AbfahrtArrival 3.Site 2

===============

Name2
1.Site 1 Ankunft
2.Site 1 Abfahrt
3 .Site 2 Ankunft

Ich weiß, es klingt einfach genug, aber ich bin neu in JavaScript, so dass alle Beispiele/Demos geschätzt werden.

Hinweis: Es gibt keine festen Werte, Namen ändern sich ständig und mehr Zeilen hinzugefügt.

Quelle

2017-06-04 Cyb3rHac3r

"Ich habe keinen Code als Beispiel zu teilen", warum nicht?Versuchen Sie sich zuerst, bitte! –

Sie können jede Zeile mit Klasse parent auswählen und dann erhalten Sie die folgenden zwei Zeilen mit jQuery next() Funktion. Vom docs:

ein jQuery-Objekt gegeben, dass eine Reihe von DOM-Elementen darstellt, die .next() Methode ermöglicht es uns, durch die unmittelbar folgenden Geschwister dieser Elemente im DOM-Baum zu suchen und ein neues jQuery-Objekt aus dem passenden konstruieren Elemente.

Auch jedes HTML-Element sollte eine eindeutige ID haben. In Ihrem Code haben Sie die ID row0 für 3 verschiedene Elemente verwendet, was nur eine schlechte Übung ist. Wenn solche Fälle benötigt werden, sollten Sie Klassen anstelle von IDs verwenden.

Das folgende Snippet erstellt ein Array mit Objekten, die die angeforderten Informationen enthalten. Die Extraktion dieser Informationen hängt von der Reihenfolge der Spalten ab (insbesondere verwendete ich den :nth-child() Selektor, um die gewünschte Zelle zu erhalten). Wenn sich die Reihenfolge der Spalten im Laufe der Zeit ändert, sollten Sie in Erwägung ziehen, jeder Zelle beschreibende Klassen hinzuzufügen und basierend auf diesen Klassen auszuwählen.

var entries = []; 
 

 
$("#tablemain tr.parent").each(function(){ 
 
    var child1 = $(this).next(); 
 
    var child2 = child1.next(); 
 
    var cells = { 
 
    name: $(this).find("td:nth-child(1)").text(), 
 
    arrival1: child1.find("td:nth-child(2)").text(), 
 
    departure: child2.find("td:nth-child(2)").text(), 
 
    arrival2: child1.find("td:nth-child(3)").text() 
 
    }; 
 

 
    entries.push(cells); 
 

 
}); 
 

 
console.log(entries);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tablemain" class="tableclass"> 
 
    <thead> 
 
    <tr> 
 
     <th>A</th> 
 
     <th>Site1</th> 
 
     <th>Site2</th> 
 
     <th>D</th> 
 
     <th>E</th> 
 
     <th>F</th> 
 
     <th>G</th> 
 
     <th>H</th> 
 
     <th>I</th> 
 
     <th>J</th> 
 
     <th>K</th> 
 
     <th style="width: 10%;">L</th> 
 
     <th>M</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="row0" class="parent"> 
 
     <td class="radioTableDetails awarded-td-background-color">Name1</td> 
 
     <td colspan="11">&nbsp;</td> 
 
     <td class="version-Link-Table even-td-TableDetails">&nbsp;</td> 
 
    </tr> 
 
    <tr id="row01" class="child"> 
 
     <td class="child-row-Table-Details"><strong>Arrival</strong></td> 
 
     <td class="even-td-TableDetails">06/06/2017 09:30</td> 
 
     <td class="odd-td-TableDetails">06/06/2017 16:00</td> 
 
     <td class="even-td-TableDetails">A</td> 
 
     <td class="odd-td-TableDetails">B</td> 
 
     <td class="even-td-TableDetails">D</td> 
 
     <td class="odd-td-TableDetails">E</td> 
 
     <td class="even-td-TableDetails">&nbsp;</td> 
 
     <td class="odd-td-TableDetails">F</td> 
 
     <td class="even-td-TableDetails">G</td> 
 
     <td class="odd-td-TableDetails">H</td> 
 
     <td class="even-td-TableDetails diff-td-text-color">I</td> 
 
     <td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td> 
 
    </tr> 
 
    <tr id="row02" class="child"> 
 
     <td class="child-row-Table-Details"><strong>Departure</strong></td> 
 
     <td class="even-td-TableDetails">06/06/2017 10:00</td> 
 
     <td class="odd-td-TableDetails">-</td> 
 
     <td class="even-td-TableDetails" colspan="9">-</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr id="row1" class="parent"> 
 
     <td class="radioTableDetails">Name2</td> 
 
     <td colspan="11">&nbsp;</td> 
 
     <td class="version-Link-Table even-td-TableDetails">&nbsp;</td> 
 
    </tr> 
 
    <tr id="row11" class="child"> 
 
     <td class="child-row-Table-Details"><strong>Arrival</strong></td> 
 
     <td class="even-td-TableDetails">06/06/2017 10:30</td> 
 
     <td class="odd-td-TableDetails">06/06/2017 17:00</td> 
 
     <td class="even-td-TableDetails">A</td> 
 
     <td class="odd-td-TableDetails">B</td> 
 
     <td class="even-td-TableDetails">D</td> 
 
     <td class="odd-td-TableDetails">E</td> 
 
     <td class="even-td-TableDetails">&nbsp;</td> 
 
     <td class="odd-td-TableDetails">F</td> 
 
     <td class="even-td-TableDetails">G</td> 
 
     <td class="odd-td-TableDetails">H</td> 
 
     <td class="even-td-TableDetails diff-td-text-color">I</td> 
 
     <td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td> 
 
    </tr> 
 
    <tr id="row12" class="child"> 
 
     <td class="child-row-Table-Details"><strong>Departure</strong></td> 
 
     <td class="even-td-TableDetails">06/06/2017 11:00</td> 
 
     <td class="odd-td-TableDetails">-</td> 
 
     <td class="even-td-TableDetails" colspan="9">&nbsp;-</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p>&nbsp;</p>

Quelle

2017-06-04 13:15:11 Botimoo

Schleife durch Tabelle und extrahiere spezifische Zellen

Antwort

Verwandte Themen