HTMLTableElement дочерние узлы не ожидаются

Question

Я недавно начал с Type Script, извините, если это проклятый вопрос.

Я пытаюсь добавить прослушиватель событий к самой таблице, но прослушивать событие щелчка по строкам (все строки в моей таблице генерируются динамически, кроме строки заголовка)

Кодекса:

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> 

Тип сценария

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 
      } 
     }  
    } 
} 

И вот вопрос: почему HTMLTableElementchildNodes: #Text и TBODY, а не tr, td ... и т.д ???

P.S. Код ведет себя одинаково, даже если это статический html, поэтому я не включил код, который генерирует таблицу. P.P.S. Родительский узел однако отображается правильно - DIV

UPD Проблема solwed. Для того, чтобы получить доступ к остальным элементам таблицы - следующий должен быть сделано:

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); 
      } 
     } 
    } 
} 

Надеется, что это помогает кому-то еще.

Answer 1

1) «#text» вы видите, потому что в образце, который вы указали между тегами «table» и «tr», есть текстовый узел с новым символом строки и пробелами. Чтобы увидеть это более ясно, вы можете заменить предупреждение

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

Чтобы удалить его - удалить все промежутки между «столом» и тегами «TR».

2) Что касается второго вопроса есть очень хорошее объяснение: Why do browsers insert tbody element into table elements?

Надеется, что это помогает.