html - Javascript can get row index and get cell data at same time? - Stack Overflow

admin管理员组

文章数量:1394088

My table can get row index by .rowIndex. Is it possible if I want third column data of row.

My Table :

<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>

and my script:

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

What function should I use get 'WT' or 'MDL' or 'HIGH' when i click each row?

My table can get row index by .rowIndex. Is it possible if I want third column data of row.

My Table :

<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>

and my script:

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

What function should I use get 'WT' or 'MDL' or 'HIGH' when i click each row?

• javascript
• html

Share Improve this question Follow edited Nov 8, 2017 at 3:22 patipat chewprecha asked Nov 8, 2017 at 3:08 patipat chewprechapatipat chewprecha 28522 gold badges77 silver badges2121 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

No need of adding onclick event handler to every tr.Rather in js attach onclick to tbody.

On click get the event object & from there get the target. The target will be td.innerHTML will give the content of the td & parentNode will return the tr of the td from where the event generated.

Use rowIndex to get the index of the row. rowIndex starts from 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>

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

getAllItems();

Now on your tr element do the following:

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

本文标签： htmlJavascript can get row index and get cell data at same timeStack Overflow