Как получить доступ к последнему столбцу таблицы в чистом javascript или машинописи

Question

Попытка получить доступ к последнему столбцу для каждой строки в чистом 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

Answer 1

Я не уверен, почему вы хотите это чистым javascript способом, пока вы используете angular,

В любом случае, я могу найти для вас решение чистым javascript способом с dom querySelector () методы ..

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), Вы можете использовать angular elementRef и получить значение, используя,

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

И таблица будет полностью инициализирована внутри ngAfterviewInit ловушка жизненного цикла, следовательно, изменена с ngOnInit() ловушка.

Также добавлена ​​ChangeDetectionStrategy для обнаружения изменений в значениях (ях) выбора блока ..

Обновлен стек с добавлением: https://stackblitz.com/edit/primeng-tables-ubgkcm

Answer 2

Если вы хотите установить прослушиватель события change на элемент select, содержащийся в последнем элементе td каждой строки, вы можете сделать следующее:

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