Javascriptは行インデックスを取得し、同時にセルデータを取得できますか？

Question

私のテーブルは、行インデックスを.rowIndexで取得できます。私は行の3番目の列のデータが必要な場合は可能ですか？

マイ表：

<table width="90%" border="1" id="TestAlert"> 
<tbody> 
    <tr><td>Attribute</td> <td>Thai</td> <td>English</td></tr> 
    <tr onclick="myFunction((this))"><td>น้ำหนัก</td><td>...</td><td>WT</td></tr> 
    <tr onclick="myFunction((this))"><td>ชื่อรุ่น</td><td>...</td><td>MDL</td></tr>   
    <tr onclick="myFunction((this))"><td>สูง</td><td>...</td><td>HIGH</td></tr></tbody> 
    </table> 

と私のスクリプト：

function myFunction(x) { 
if(x.rowIndex != 0){ 
console.log("Row index is: " + x.rowIndex + "Data 3rd cell: " + **CellData**); //get index 
} 

私はそれぞれの行をクリックすると、 'WT' または 'MDL' または 'HIGH' を取得する使用する必要がありますどのような機能？あなたのtr要素に今

Answer 1

jsファイル内のすべてのtr .Ratherへonclickイベントハンドラを追加する必要はありませtbodyへonclickを添付。

オンclickイベントオブジェクトを取得&そこからターゲットを取得します。ターゲットはtdになります。 innerHTMLは、イベントの発生場所からtdのtrを返すでしょう、tdのコンテンツを提供します。& parentNode

rowIndexを使用して行のインデックスを取得します。働い0

var table = document.getElementById('TestAlert') 
 
var getTBody = table.getElementsByTagName("tbody")[0]; 
 
getTBody.onclick = function(e) { 
 
    console.log(e.target.parentNode.rowIndex) 
 
    console.log(e.target.innerHTML) 
 
};

<table width="90%" border="1" id="TestAlert"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Attribute</td> 
 
     <td>Thai</td> 
 
     <td>English</td> 
 
    </tr> 
 
    <tr> 
 
     <td>น้ำหนัก</td> 
 
     <td>...</td> 
 
     <td>WT</td> 
 
    </tr> 
 
    <tr> 
 
     <td>ชื่อรุ่น</td> 
 
     <td>...</td> 
 
     <td>MDL</td> 
 
    </tr> 
 
    <tr> 
 
     <td>สูง</td> 
 
     <td>...</td> 
 
     <td>HIGH</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

function getAllItems(){ 
    const items = document.querySelectorAll('tr'); 
    const itemsArr = Array.from(items); 
    itemsArr.forEach(c=> console.log(c.textContent)); 
} 

getAllItems(); 

次の手順を実行します。

<tr onclick="getAllItems()"><td>สูง</td><td>...</td><td>HIGH</td></tr> 
</tbody>