HTMLTableElement子節點並不如預期

我最近開始使用類型腳本，對不起，如果它是一個該死的問題。HTMLTableElement子節點並不如預期

我想添加事件監聽器表本身，而是偵聽行click事件（在我的表中的所有行是動態生成的，除了標題行）

驗證碼：

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

希望這可以幫助其他人。

來源

2016-01-21 Sasha

1）您看到的「#text」是因爲在「table」和「tr」標記之間的示例中存在帶有新行字符和空格的文本節點。爲了看得更清楚，你可以用

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

更換警報要刪除它 - 刪除「表」和「TR」標籤之間的所有空間。

2）對於第二個問題，有一個非常好的解釋一下：Why do browsers insert tbody element into table elements?

希望這有助於。

來源

2016-01-21 14:19:20 Amid

謝謝。我不介意這些標籤，只要我還可以通過和來解決這些問題。問題是我根本得不到那些 - childNodes數組只包含那兩個... – Sasha

元素將會是的子元素，分別是的子元素等等。 – Amid

很好的解釋，但它不完全是我問的。 – Sasha

HTMLTableElement子節點並不如預期

回答

相關問題