HTMLTableElement child nodes are not as expected

Question

I've recently started with Type Script, sorry if it's a damn question.

I am trying to add the event listener to the table itself, but listen for the click event on the rows (all rows in my table are generated dynamically, besides the header row)

The Code:

Html

<div id="searchResult" style="display: none;">
    <table id="searchResultTable">
        <tr>
            <td id="passengers">Passengers</td>
            <td id="companyName">Client</td>
            <td id="bookingFileName">Booking File Name</td>
            <td id="bookingFile">Booking File</td>
            <td id="amadeusPNR">PNR</td>
            <td id="evolviPnrRecord">Evolvi Ref</td>
            <td id="bookingsID">Bookings ID</td>
            <td id="bookingTypeName">Booking Type</td>
            <td id="voucherNumber">Car Hire Voucher</td>
            <td id="consultantName">Consultant</td>
            <td id="supplierName">Supplier</td>
            <td id="statusName">Status</td>
            <td id="scannedSupplierInvoicesID">ScanID</td>
            <td id="handOffStatus">HandOff Status</td>
            <td id="reHandOff">Re-HandOff</td>
        </tr>
    </table>
</div>

Type Script

class class SearchAllFormUIX {
    constructor() {
        this.addListeners();    
    }

    addListeners() {
        var searchResultTable: HTMLTableElement = <HTMLTableElement> document.getElementById("searchResultTable");
        searchResultTable.onclick = this.propertyChanged;
    }

    propertyChanged = (event: MouseEvent) => {
        var target: HTMLElement = <HTMLElement> event.target;

        if (target.getAttribute("id") == "searchResultTable") {
            alert(target.parentNode.nodeName); // DIV
            for (var i = 0; i < target.childNodes.length; i++) {
                alert(target.childNodes[i].nodeName);
                // target.childNodes[0] = #Text
                // target.childNodes[1] = TBODY
            }
        }    
    }
}

And the question is this - why HTMLTableElement childNodes are #Text and TBODY and not tr, td ... etc ???

P.S. Code behaves the same even if it's static html, so I didn't include code that generates the table. P.P.S. The parent node is however displayed correctly - DIV

UPD Problem solwed. In order to access the rest of the table elements - the following should be done:

for (var i = 0; i < target.childNodes.length; i++) {
    if (target.childNodes[i].nodeName == "TBODY") {
        for (var j = 0; j < target.childNodes[i].childNodes.length;j++) {
            if (target.childNodes[i].childNodes[j].nodeName == "TR") {
                alert(target.childNodes[i].childNodes[j].textContent);
            }
        }
     }
 }

Hope this helps someone else.

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

1) "#text" you see because there is a text node with new line character and spaces in the sample you gave between "table" and "tr" tags. To see it more clearly you can replace alert with

console.dir(target.childNodes[i]);

To remove it - remove all spacing between "table" and "tr" tags.

2) For the second question there is a very nice explanation here: Why do browsers insert tbody element into table elements?

Hope this helps.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 21 '16 at 14:19

Amid

21,508
5
57
54

Thank you. I don't mind these tags as long as I also get and to fire the event on them. The problem is that I don't get those at all - the childNodes array only consist of those two ... – Sasha Jan 22 '16 at 06:39
elements will be children of , is respectively children of and so on. – Amid Jan 22 '16 at 06:53
Nice explanation, but it's not exactly what I was asking. – Sasha Jan 22 '16 at 07:00

HTMLTableElement child nodes are not as expected

1 Answers1