Question

我最近开始使用Type Script，抱歉，如果这是一个该死的问题。

我正在尝试将事件监听器添加到表本身，但是监听行上的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
            }
        }    
    }
}

问题是这个问题 - 为什么HTMLTableElement childNodes是#Text和TBODY而不是tr，td等等？ ??

P.S。代码的行为相同，即使它是静态html，所以我没有包含生成表的代码。 P.P.S。但是，父节点正确显示 - DIV

UPD 问题解决了。要访问其余表元素，应执行以下操作：

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）＆＃34; #text＆＃34;你看，因为你在＆＃34; table＆＃34;之间给出的样本中有一个带有换行符和空格的文本节点。和＆＃34; tr＆＃34;标签。要更清楚地看到它，您可以用

替换警报

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

删除它 - 删除＆＃34; table＆＃34;之间的所有间距;和＆＃34; tr＆＃34;标签

2）对于第二个问题，这里有一个非常好的解释：Why do browsers insert tbody element into table elements?

希望这有帮助。

HTMLTableElement子节点不是预期的

1 个答案: