如何为 table 的第一列编写点击事件

Question

我正在尝试为 table 的第一列编写点击事件。如果我单击第一列 ID，我想在警告框中获取该值。我试过了，但没用。行数未包含 Angular 7 和 8。

不要使用像#tableId 这样的元素引用。请使用table id.

app.component.html:

  <table id="tableId">
  <thead>
    <th>Id</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tr>
    <td>12345</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>12346</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>12347</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>12348</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>12349</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>12310</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

app.component.ts:

 ngAfterViewInit() {
    const table = <HTMLTableElement> document.getElementById('tableId');
    for (let row of table.rows) {
      const firstCell = row.childNodes.item(0);
      firstCell.addEventListener('click', () => alert(firstCell.textContent));      
      (<HTMLElement> firstCell).setAttribute('style', 'cursor: pointer;');
    }
  }

Answer 1

为 tr 添加 onclick 事件（这样如果用户单击 table 中的任何地方，您将获得相应的行 ID）并获取子项。

function test(event){
  console.log($(event).find('td').eq(0).text());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableId">
  <thead>
    <th>Id</th>
    <th>Contact</th>
    <th>Country</th>
  </thead>
  <tr onclick = "test(this)">
    <td>12345</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr onclick = "test(this)">
    <td>12346</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr onclick = "test(this)">
    <td>12347</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Answer 2

在 html.

中声明 table #tableId 的引用变量

引用table组件内部的Id变量

@ViewChild("tableId") table: ElementRef;

为所有第一个单元格附加点击事件

ngAfterViewInit(){
     let tblElement = this.table.nativeElement;
      for (let row of tblElement.rows) {
      const firstCell = row.childNodes.item(0);
      firstCell.addEventListener('click', () => alert(firstCell.textContent));      
      (<HTMLElement> firstCell).setAttribute('style', 'cursor: pointer;');
    }
  }

工作example

如何为 table 的第一列编写点击事件

How to write click event for table's first column

javascript

typescript

angular7

angular8