wählen Sie visual jQuery Spalte in einer Tabelle mit rowspan

Ich habe gesehen, dass einige ähnliche Fragen, aber nichts, die Antworten, die dieses spezielle problem Auftritt. Betrachten wir die folgende Tabelle:

<table id="foo" border="1px">
    <tr>
        <td rowspan="2">one</td>
        <td>two</td>
        <td rowspan="2">three</td>
        <td>four</td>
        <td>five</td>
    </tr>
    <tr>
        <td rowspan="2">two</td>
        <td>four</td>
        <td>five</td>
    </tr>
    <tr>
        <td rowspan="2">one</td>
        <td>three</td>
        <td>four</td>
        <td>five</td>
    </tr>
    <tr>
        <td>two</td>
        <td>three</td>
        <td>four</td>
        <td>five</td>
    </tr>
</table>

Verwendung von jQuery, wie kann ich alle Objekte auswählen, die in einer bestimmten visual-Spalte? Zum Beispiel, wenn ich wollen, wählen Sie Spalte 3, ich sollte alle td ' s mit 'drei' als Inhalt.

InformationsquelleAutor AdmSteck | 2011-05-12
  1. 5

    Nicht angeschaut der gepostet plugin, aber ich fand die Frage interessant, also schuf ich ein Turnschuh!

    http://jsfiddle.net/PBPSp/

    Wenn die das Stopfen funktioniert es vielleicht besser als dieses, aber es war eine lustige übung, so kann ich Sie auch per post.

    Ändern colToGet zu in welcher Spalte, die Sie markieren möchten.

    $(function() {
    var colToGet = 2;

    var offsets = [];
    var skips = [];

    function incrementOffset(index) {
        if (offsets[index]) {
            offsets[index]++;
        } else {
            offsets[index] = 1;
        }
    }

    function getOffset(index) {
        return offsets[index] || 0;
    }

    $("#foo > tbody > tr").each(function(rowIndex) {

        var thisOffset = getOffset(rowIndex);

        $(this).children().each(function(tdIndex) {

            var rowspan = $(this).attr("rowspan");

            if (tdIndex + thisOffset >= colToGet) {
                if(skips[rowIndex]) return false;

                $(this).css("background-color", "red");

                if (rowspan > 1) {
                    for (var i = 1; i < rowspan; i++) {
                        skips[rowIndex + i] = true;
                    }
                }

                return false;
            }

            if (rowspan > 1) {
                for (var i = 1; i < rowspan; i++) {
                    incrementOffset(rowIndex + i);
                }
            }
        });
    });
});​
    • Gibt es eine Möglichkeit, dies kann ausgedehnt werden, die colspans?
    • Quick and dirty und nur leicht getestet, aber es scheint zu funktionieren. jsfiddle.net/PBPSp/80
    • Danke! Ich bin wirklich versucht, dies zu tun in .NET und war mit ein wenig Mühe Umhüllung meinem Kopf, um den Algorithmus.
    InformationsquelleAutor James Montagne
  2. 6

    Dieses plugin Griffe komplexe colspan und rowspan Auswahl:

    $('#foo th:nth-col(3), #foo td:nth-col(3)').css("color","red");
    InformationsquelleAutor utt73
  3. 1

    Ich bin nicht sicher, wie Sie Sie wollen, wählen Sie Sie aus, aber sowas?

    $(function() {
    $("#foo").find("td:contains('three')").css("background-color","#eee");
});

    Was willst du mit der TDs nachdem Sie diese auswählen?

    InformationsquelleAutor user647345
  4. 1

    Wenn Sie unterstützen möchten, colspan und rowspan, dann müssen Sie zuerst
    bauen-Tabelle-index, dh. die matrix identifiziert die position in jeder Zelle
    Zeile unabhängig von der markup. Dann werden Sie brauchen, um zu verfolgen Ereignisse, die von allen
    Zellen der Tabelle, und berechnen Ihre offset in der matrix und der Spalten
    die Freigabe der horizontalen und vertikalen index.

    Dies ist die Beschreibung von https://github.com/gajus/wholly, ein plugin, dass ich für diesen Zweck entwickelt. Über die Veranstaltungen finden Sie alle Werte in der Zeile oder in einer Spalte, einschließlich derjenigen, befestigt mit rowspan oder solspan Eigenschaften.

    Machte ich eine Visualisierung zur Veranschaulichung eine Tabelle und die Ereignisse, die ausgelöst werden bei der navigation.

    wählen Sie visual jQuery Spalte in einer Tabelle mit rowspan

    Orange ist die aktive Zelle, rot sind die Zellen, ausgelöst durch die vertikale Veranstaltung und blau sind die Zellen, ausgelöst durch horizontal-event.

    InformationsquelleAutor Gajus
  5. 0

    Geben jede Ihrer Zeilen - /Spalten-Klassen. Also Zeile 1 Spalte 1 class='Row1 Column1' wählen Sie Dann auf der Klasse, wie gebraucht. (Wenn Sie nicht wollen, wählen Sie immer auf Zeilen würden Sie nicht brauchen, die Zeile Spezifikation nur versuchen, zu extrapolieren, wie das raster.

    InformationsquelleAutor Chad
Schreibe einen Kommentar