Click on HTML table and get row number (with Javascript, not jQuery)

Question

I would like to know how to click on a button in an HTML table and get the row and column number returned to me: For example, with the following table:

<table>
  <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
    <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
    <tr>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    <td><input type="button" value="button"></td>
    </tr>
  </table>

How would I use JavaScript to click on the first button in the second row and have it tell me that I clicked on the first cell in the second row? Does each button need to have a unique id, or not?

Rows have rowIndex. and cells have cellIndex. You can use them like so ... — Teemu
– Teemu, Commented Mar 13, 2015 at 21:50

Gremash · Accepted Answer · 2015-03-13 22:07:09Z

46

Try this:

function  getId(element) {
    alert("row" + element.parentNode.parentNode.rowIndex + 
    " - column" + element.parentNode.cellIndex);
}

<table>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
  <tr>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
    <td><input type="button" value="button" onclick="getId(this)"></td>
  </tr>
</table>

edited Mar 13, 2015 at 22:07

answered Mar 13, 2015 at 22:01

Gremash

8,3387 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gremash Over a year ago

You could easily add this to the TD <td onclick=getId(this)> and drop one of the parentNode functions to not use the buttons.

anhtv13 Over a year ago

I try "element.parentNode.parentNode.rowIndex" but it returns undefined

REMITH Over a year ago

Superman...... I got so many solutions by jQuery. I wanted in Javascript. GOT IT.....

Tu4n3r · Accepted Answer · 2017-06-14 14:16:46Z

11

Most generic version of @Gremash js function

function  getId(element) {
    alert("row" + element.closest('tr').rowIndex + 
    " -column" + element.closest('td').cellIndex);
}

answered Jun 14, 2017 at 14:16

Tu4n3r

4415 silver badges10 bronze badges

Comments

FCF75 · Accepted Answer · 2022-01-27 08:33:02Z

0

Try this code: alert(document.getElementById("yourTableId").childNodes[1].childElementCount);

answered Jan 27, 2022 at 8:33

FCF75

11 silver badge2 bronze badges

1 Comment

Luca Kiebel Over a year ago

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Collectives™ on Stack Overflow

Click on HTML table and get row number (with Javascript, not jQuery)

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related