表に入力から要素IDを取得JS

Question

私は（それは私が得る文字列または要素である場合、私は知りませんから）IDを取得したいと思います。私の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">

しかし、私はこの要素のIDを取得し、配列にプッシュすることはできません。これを行う方法？

Answer 1

あなたはelement.innerHTMLを使用しているが、それは単なるテキストです。 あなたは適切なIDを取得するために、結果を使用するために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を使用することができます。 要素を取得するために使用できるもう1つの関数は、getElementByClassName（）です。あなたは、あなたが興味を持っているものをアクセスするためにインデックスを使用し、また、すべての要素を取得するために、後者の二つの関数に引数「*」を渡すことができます。