Получить идентификатор элемента из ввода в таблице JS

Question

Я хотел бы получить идентификатор (из я не знаю, является ли это строкой или элементом, который я получаю). Мой HTML код и Javascript выглядеть следующим образом:

var table = document.getElementById('workerTimes'); 
 
var emptyArray = new Array(100); 
 

 
for (var r = 1, n = table.rows.length; r < n; r++) { 
 
    var element = table.rows[r].cells[0].innerHTML; 
 
    emptyArray.push(element.id); 
 

 
    console.log(element); 
 
}

<table class="table" id="workerTimes"> 
 
    <tbody> 
 
    <tr> 
 
     <th></th> 
 
     <th>Osoba</th> 
 
     <th>Rozpoczął pracę punktualnie</th> 
 
     <th>Zakończył pracę punktualnie</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" id="50"></td> 
 
     <td>Jan</td> 
 
     <td> 
 
     <button type="button" class="button_positive" onclick="tickClick(50, 0, 0)">✓</button> 
 
     <button type="button" class="button_negative" onclick="tickClick(50, 0, 1)">X</button> 
 
     </td> 
 
     <td> 
 
     <button type="button" class="button_positive" onclick="tickClick(50, 1, 0)">✓</button> 
 
     <button type="button" class="button_negative" onclick="tickClick(50, 1, 1)">X</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

И лог консоли показывает

< тип ввода = "Флажок" ID = "50">

, но я не могу получить идентификатор этого элемента и нажать массив. Как это сделать?

Answer 1

Вы используете element.innerHTML, но это только текст. Вы хотите использовать element.children или потенциально element.childNodes, чтобы работать с результатом, чтобы получить правильный идентификатор.

var table = document.getElementById('workerTimes'); 
 

 
var emptyArray = new Array(100); 
 

 
for (var r = 1, n = table.rows.length; r < n; r++) { 
 
    var element = table.rows[r].cells[0].children[0]; 
 
    emptyArray.push(element.id); 
 

 
    console.log(element); 
 
    console.log(element.id); 
 
}

<table class="table" id="workerTimes"> 
 
    <tbody> 
 
    <tr> 
 
     <th></th> 
 
     <th>Osoba</th> 
 
     <th>Rozpoczął pracę punktualnie</th> 
 
     <th>Zakończył pracę punktualnie</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" id="50"></td> 
 
     <td>Jan</td> 
 
     <td> 
 
     <button type="button" class="button_positive" onclick="tickClick(50, 0, 0)">✓</button> 
 
     <button type="button" class="button_negative" onclick="tickClick(50, 0, 1)">X</button> 
 
     </td> 
 
     <td> 
 
     <button type="button" class="button_positive" onclick="tickClick(50, 1, 0)">✓</button> 
 
     <button type="button" class="button_negative" onclick="tickClick(50, 1, 1)">X</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

Я собираюсь предположить, что по первому столбцу вы имеете в виду первую строку. Вы можете использовать getElementByTagName ("TH") [0] .innerText, чтобы получить значение внутри этого элемента. Другой функцией, которую вы можете использовать для получения элементов, является getElementByClassName(). Вы можете передать аргумент «*» в две последние функции, чтобы получить все элементы, а затем использовать индекс для доступа к интересующему вас.