Home » Javascript » How to map html table header cell to a row cell via css or xpath selectors?

How to map html table header cell to a row cell via css or xpath selectors?

Posted by: admin August 19, 2018 Leave a comment

Questions:

So I have data structured like that in page:

<!-- some html-->
<table>
    <thead>
    <tr>
        <th>Date</th><th>Type</th><th>Value</th> <!-- Header I need -->
    </tr>
    </thead>
</table>
<!-- some html-->
<table>
    <tbody>
        <tr id="insertGuidHere">
            <td>eventDate</td><td>eventType</td><td>eventData</td> <!-- Values I need to map -->
        </tr>
    </tbody>
</table>

I have a header row and somewhere down the line in a different table on a different level I have the data row (an overly complex kendo-grid). I can’t go from one to another via a reasonable xpath, but I know that indices match correctly.

What I want is a way to map header index to data. Something like reverse nth-child() – I find the element by text and return its index

var x = $x("//th[contains(text(),'Value')]")[0].findIndexAmongSiblings(); // returns 3, because it's 3rd header cell
$("tr#insertGuidHere > td:nth-child(" + x + ")"); // returns eventData cell

I know there is an .index() function in jQuery, but I couldn’t get it to run properly, that is to return a numeric.

Answers: