如何在纯 javascript 或 typescript 中访问表的最后一列答案

【问题标题】：How to access table's last column in pure javascript or typescript如何在纯 javascript 或 typescript 中访问表的最后一列
【发布时间】：2020-02-12 12:54:23
【问题描述】：

试图在纯 javascript 中访问每一行的最后一列，而不是在 jquery 中但不工作。任何知道的人请帮助找到解决方案。

app.component.html：

<div id="contentId">
<table>
  <thead>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td><select><option>Select</option><option value="test1">Test 1</option><option value="test2">Test 2</option></select></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td><select><option>Select</option><option value="test1">Test 1</option><option value="test2">Test 2</option></select></td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td><select><option>Select</option><option value="test1">Test 1</option><option value="test2">Test 2</option></select></td>
  </tr> 
</table>
</div>

演示：https://stackblitz.com/edit/amexio-breadcrumb-demo-jyxytf?file=src/app/app.component.ts

【问题讨论】：

用例是什么，为什么不在select元素上直接定义一个更改事件监听器呢？ <select (change)="getEvent($event)">
@uminder：请不要更改 html。可以在ts文件里做吗？

标签： javascript typescript angular7 angular8

【解决方案1】：

我不知道为什么你在使用 angular 时想要以纯 javascript 方式使用它，

无论如何，我可以使用dom querySelector() methods 以纯 JavaScript 方式为您提供解决方案。

ngOnInit(){

  const gettable = document.getElementById("contentId").querySelector('table');
  const rows = gettable.getElementsByTagName('tr');

  for (let i=0; i<rows.length; i++)
  {
    const columns = rows[i].getElementsByTagName("td");
    const lastColumn = columns[columns.length - 1];
    const select = lastColumn.querySelector('select');
    select.addEventListener('change', this.getEvent.bind(this, select))
  }

}

getEvent(selectedItem){  
  console.log(selectedItem.value);
  return event;
}

我已经制定了一个解决方案，可以在选择的每一行的最后检索每个选择框的值..

Forked Stackblitz here ...

更新：

如果您使用primeng表并且需要从表中检索值（p-table），您可以使用角度elementRef并使用获取值，

const table = this.elementRef.nativeElement.querySelectorAll('p-table table');

并且该表将在 ngAfterviewInit 生命周期钩子中完全初始化，因此从 ngOnInit() 钩子更改。

还添加了ChangeDetectionStrategy 以检测选择框值的变化..

用primeng更新了stackblitz：https://stackblitz.com/edit/primeng-tables-ubgkcm

【讨论】：

我还有一个问题：实际上我的表父级是这样的 ....所以我可以这样使用：document.getElementById("p-table > contentId").querySelector('table') ??
您可以使用<p-table id="contentId"> 发布示例代码吗？或者提供一些带有代码的stackblitz链接..我会调查一下..
请等2分钟
这是我的堆栈闪电战：stackblitz.com/edit/…
@NilaVaani，实现这种方式很复杂。我可以知道您为什么不更改模板（HTML）中的任何内容的原因吗？？

【解决方案2】：

假设您要在每行的最后一个 td 元素中包含的 select 元素上安装一个事件 change 侦听器，您可以执行以下操作：

ngOnInit(){ 
    const table: HTMLTableElement = document.getElementById("contentId").querySelector('table');
    Array.from(table.getElementsByTagName('tr')).map(tr => tr.querySelector('td:last-of-type').querySelector('select').addEventListener('change', event => this.getEvent(event)));
}

请查看分叉的StackBlitz

【讨论】：