Tabelle mit Javascript/PrototypeJS parsen.

[ulf-wagner]

Liebe Gemeinde,

ich möchte in meinem Addon aus einer mit src/idoit/Component/Table/Table.php erstellte Tabelle mit Javascript einzelne Spalten auslesen. Konkret möchte ich GeraeteID und APStandortID auslesen.
Folgende HTML-Tabelle wird erstellt/abgefragt:

<tbody class="mainTableHover mouse-pointer">
    <tr data-id="46774" data-link="/i-doit/?objID=46774" class="highlightLine tr-selected">
        <td>
            <label class="mainTableCheckbox"><input type="checkbox" name="id[]" value="46774"></label>
        </td>
        <td data-property="GeraeteID">
            <span class="overflowable">46774</span>
        </td>
        <td data-property="Geraetename">
            <span class="overflowable">B27T-7-LED</span>
        </td>
        <td data-property="GeraeteStandortID">
            <span class="overflowable">1347</span>
        </td>
        <td data-property="GeraeteStandort">
            <span class="overflowable">Kir 3.30</span>
        </td>
        <td data-property="AP_ID">
            <span class="overflowable"><a href="/i-doit/?objID=44847">44847</a> </span>
        </td>
        <td data-property="APName">
            <span class="overflowable"><a href="/i-doit/?objID=44847">AP Schneider, Hans</a> </span>
        </td>
        <td data-property="APStandortID">
            <span class="overflowable"><a href="/i-doit/?objID=1295">1295</a> </span>
        </td>
        <td data-property="APStandortname">
            <span class="overflowable"><a href="/i-doit/?objID=1295">Kir 3.01c</a> </span>
        </td>
    </tr>
    <tr data-id="45374" data-link="/i-doit/?objID=45374" class="tr-selected">
        <td>
            <label class="mainTableCheckbox"><input type="checkbox" name="id[]" value="45374"></label>
        </td>
        <td data-property="GeraeteID">
            <span class="overflowable">45374</span>
        </td>
        <td data-property="Geraetename">
            <span class="overflowable">Flatron W2242PK</span>
        </td>
        <td data-property="GeraeteStandortID">
            <span class="overflowable">30984</span>
        </td>
        <td data-property="GeraeteStandort">
            <span class="overflowable">AM 3</span>
        </td>
        <td data-property="AP_ID">
            <span class="overflowable"><a href="/i-doit/?objID=45375">45375</a> </span>
        </td>
        <td data-property="APName">
            <span class="overflowable"><a href="/i-doit/?objID=45375">AP Müller,Peter</a> </span>
        </td>
        <td data-property="APStandortID">
            <span class="overflowable"><a href="/i-doit/?objID=30978">30978</a> </span>
        </td>
        <td data-property="APStandortname">
            <span class="overflowable"><a href="/i-doit/?objID=30978">AM 2</a> </span>
        </td>
    </tr>
</tbody>

und möchte dann bei Klick auf einen Button mit Javascript die IDs der Geräte aus der Tabelle auslesen. Hier komme ich allerdings nicht weiter. Es gelingt mit nicht den Inhalt (Wert) der Tabellezelle auszulesen.
Könnt Ihr mir vielleicht weiterhelfen?

(function() {
 
    window.ap_func2 = function() {
        let  rows = $$('tr.tr-selected');
        rows.each(setLocation)
    }

    function setLocation(row) {
        let gID= row.select('td[data-property="GeraeteID"]');
        idoit.Notify.info(gID); //-> liefert HTMLTableCellElement
        let span = gID.select('span'); //-> liefert Fehler: span ist keine Funktion
        idoit.Notify.info(span);
        //let span = gID.down(1); //-> liefert Fehler: down ist keine Funktion
    }

})()

Viele Grüße
Ulf Wagner

[LFischer]

Hallo @ulf-wagner

der Code sieht eigentlich schon sehr gut aus, es fehlt nur eine Kleinigkeit:

function setLocation(row) {
    const deviceId = row.down('td[data-property="GeraeteID"] span').textContent.trim();
    const locationId = row.down('td[data-property="APStandortID"] span').textContent.trim();
}

Die erste Änderung: ich verwende down anstatt von select - das ist eine Methode die der bequemlichkeit dient select liefert immer ein Array an gefundenen Elementen, down selectiert nur das "zuerst gefundene".

Ich habe außerdem den Selector angepasst, sodass dieser nun direkt das <span> Element in der Zelle selektiert.

Die zweite Änderung: wir verwenden textContent um den "text" Inhalt des <span> Elements auszulesen - alternativ könnte man auch sowas nutzen wie innerHTML - das würde allerdings den HTML Link auslesen, probier das mal mit "APStandortID". Das Ergebnis wäre: <a href="/i-doit/?objID=1295">1295</a> ... Aber du möchtest ja vermutlich nur 1295.

Letzte Änderung: Aus technischen Gründen beinhalten die Spalten immer ein Leerzeichen - durch trim() wird dieses entfernt.

Um potentiellen JS Fehlern zu entgehen kann der Code auch so geschrieben werden:

function setLocation(row) {
    const deviceCell = row.down('td[data-property="GeraeteID"] span');
    const locationCell = row.down('td[data-property="APStandortID"] span');
    let deviceId = null;
    let locationId = null;

    if (deviceCell) {
        deviceId = deviceCell.textContent.trim();
    }

    if (locationCell) {
        locationId = locationCell.textContent.trim();
    }
}

Das sichert nur ab, das die Selektoren tatsächlich etwas gefunden haben

Ich hoffe das hilft weiter!

Viele Grüße
Leo