html的table的子节点,HTMLTableElement子节点并不如预期

我最近开始使用类型脚本，对不起，如果它是一个该死的问题。HTMLTableElement子节点并不如预期

我想添加事件监听器表本身，而是侦听行click事件(在我的表中的所有行是动态生成的，除了标题行)

验证码：

的Html

Passengers

Client

Booking File Name

Booking File

PNR

Evolvi Ref

Bookings ID

Booking Type

Car Hire Voucher

Consultant

Supplier

Status

ScanID

HandOff Status

Re-HandOff

脚本类型

class class SearchAllFormUIX {

constructor() {

this.addListeners();

}

addListeners() {

var searchResultTable: HTMLTableElement = document.getElementById("searchResultTable");

searchResultTable.onclick = this.propertyChanged;

}

propertyChanged = (event: MouseEvent) => {

var target: 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