Question

我正在尝试为表格的第一列编写一个click事件。如果单击第一列ID，我想在警报框中获取该值。我试过了，但是没有用。在Angular 7和8中，Rows没有使用。

请勿使用#tableId之类的元素引用。请使用表格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

用html声明表#tableId的引用变量。

组件内的引用tableId变量

@ViewChild("tableId") table: ElementRef;

为所有第一个单元格添加click事件

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

Answer 2

为tr添加onclick事件（这样，如果用户单击表中的任意位置，u将获得相应的行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>

如何为表格的第一栏编写点击事件

2 个答案: