如何使用最近的和父母的 javascript 方法來獲取角度 6 中的 td 值

Question

我正在嘗試使用 parent('tr) 和最接近的 ('tr') javascript 方法以及在選擇下拉列表后獲取表 tr 和第二個 td 值。解決方案。

app.component.html：

<table>
    <thead>
        <tr>
            <td>Emp  id</td>
            <td>Roll id</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>12345</td>
            <td>18956</td>
            <td>12356</td>

            <td>
              <select (change)="getTdValue(e)">
                <option value="gettdvalue">Get second td value of this row</option> 
              </select> 
           </td>
        </tr>
        <tr>
            <td>12345</td>
            <td>18906</td>
            <td>12356</td>

            <td>
              <select (change)="getTdValue(e)">
                <option value="gettdvalue">Get second td value of this row</option> 
              </select> 
           </td>
        </tr>
        <tr>
            <td>12345</td>
            <td>98956</td>
            <td>12356</td>

            <td>
              <select (change)="getTdValue(e)">
                <option value="gettdvalue">Get second td value of this row</option> 
              </select> 
           </td>
        </tr>
        <tr>
            <td>12345</td>
            <td>13956</td>
            <td>12356</td>
            <td>
              <select (change)="getTdValue(e)">
                <option value="gettdvalue">Get second td value of this row</option> 
              </select> 
           </td>
        </tr> 
    </tbody>
</table>

app.component.ts:

getTdValue(e){
    let target = e.target.closest('tr');
    if (target && target.id) {
        let td = target.find('td:nth-child(2)');
        if (td) {
             console.log("Second td value is ="+ td.value )
        } 

    }
}

https://stackblitz.com/edit/angular-peioe6?file=src/app/app.component.html

Answer 1

首先，您需要在select元素中包含第二個option元素，以便觸發任何更改事件。

<select (change)="getTdValue($event)">
    <option></option> 
    <option>Get second td value of this row</option> 
</select> 

然后你可以重寫你的getTdValue方法如下：

getTdValue(mouseEvent: MouseEvent) {       
    let target = <HTMLSelectElement> mouseEvent.target;
    let td = <HTMLTableCellElement> target.closest('tr').childNodes.item(1); 
    console.log("This row ID is " + td.innerHTML);
} 

請參閱以下StackBlitz

更新

當target.closest不起作用（角6），它可以被替換target.parentElement.parentElement如下：

getTdValue(mouseEvent: MouseEvent) {       
    let target = <HTMLSelectElement> mouseEvent.target;
    let td = <HTMLTableCellElement> target.parentElement.parentElement.childNodes.item(1); 
    console.log("This row ID is " + td.innerHTML);
}

Answer 2

您有一個評估以下條件的 if 語句： target && target.id 。 由於您的<tr>元素都沒有 ID，因此該語句將評估為 false，並且不會執行其中包含的任何邏輯。

由於您沒有將 ID 用於任何用途，您可以簡單地將其刪除：

getTdValue(e){
    let target = e.target.closest('tr');
    if (target) {
        let td = target.find('td:nth-child(2)');
        if (td) {
             console.log("Second td value is ="+ td.value )
        } 

    }
}