如何使用最近和父javascript方法在angular 6中获取td值

我正在尝试使用parents（'tr）和closest（'tr'）javascript方法获取表tr和second td值，并在选择的下拉列表后获取。但不起作用，我在google nut中搜索没有用。如果有人知道，请帮助找到解决方案

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>

---

您有一个if语句，用于计算以下条件：

target&&target.id

。由于

元素都没有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 )
        } 

    }
}

---

首先，您需要在

选择

元素中有第二个

选项

元素，以便触发任何更改事件

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

见下文

更新

当

target.closest

不起作用时（角度6），它可以被

target.parentElement.parentElement

替换，如下所示：

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

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

getTdValue（mouseEvent:mouseEvent）{
让target=mouseEvent.target；
设td=target.parentElement.parentElement.childNodes.item（1）；
log（“此行ID为”+td.innerHTML）；
}

您可以检查目标是否在

if

语句中有ID，并且由于

元素都没有ID，if语句中的逻辑将不会执行。此外，

getTdValue（e）

中的参数应该是

getTdValue（$event）

如果要挂接到

onchange

事件。实际上不知道，我在Angular 8 StackBlitz的一个分支上工作过。得到的错误如下：无法读取属性“最近的”未定义我对我的答案进行了更新，添加了一个同样适用于Angular 6的解决方案。我正在使用素数表，所以我无法获得最近的tr。我只能获得内部下拉元素，只能访问我不知道为什么像这样来

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