时间戳

首页 > 解决方案 > 如何在纯 javascript 或 typescript 中访问表的最后一列

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

问题描述

试图在纯 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

标签： javascripttypescriptangular7angular8

解决方案

我不确定为什么在使用 Angular 时你想要以纯 javascript 方式使用它，

无论如何，我可以使用dom querySelector() 方法以纯 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;
}

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

在这里分叉 Stackblitz ...

更新：

如果您使用的是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

推荐阅读