Returning Row Index from JavaScript function ,returns undefined

Question

    function getRowIndex() {
    var tble = document.getElementById("myTable");
    for (var i = 0; i < tble.rows.length; i++) {
        for (var j = 0; j < tble.rows[i].cells.length; j++) {
            tble.rows[i].cells[j].onclick = function() {

                return this.parentElement.rowIndex;
            }
        }
    }
}
var rIndex = getRowIndex();
console.log(rIndex);

This function getRowIndex() is returning undefined when I try to print index. I want to extract the row index value in value when clicked, using javaScript.

there is no return value for the getRowIndex you have created an anonynous callback function with a return statatement for onclick property of cells, but nothing that would return stuff from getRowIndex — Krzysztof Krzeszewski
– Krzysztof Krzeszewski, Commented Jul 2, 2020 at 8:09
When I do console.log() instead of return it prints the rowIndex so how can I return the same value ? — Devansh Pandey
– Devansh Pandey, Commented Jul 2, 2020 at 8:35
getRowIndex seems to be a function that assigns click event handlers to the cells of your table, so its name is misleading. Please explain what you are trying to do exactly, because that function does not seem like it should be returning any index. — M0nst3R
– M0nst3R, Commented Jul 2, 2020 at 8:40
I am creating the table using HTML DOM.If you want , you can check complete code here:- jsfiddle.net/devansh8373/5Lbrgf0k/1/# — Devansh Pandey
– Devansh Pandey, Commented Jul 2, 2020 at 12:00

Sachin Singh · Accepted Answer · 2020-07-02 08:17:16Z

1

I am assuming that you are using HTML table element. You can find row index like this:

document.getElementById('myTable').addEventListener('click', (e) => {
  if (e.target.nodeName === 'TD') {
    alert(e.target.parentNode.rowIndex);
  }
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
  padding: 10px;
  cursor: pointer;
}

<table id="myTable">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

I am using event delegation here. Instead of iterating over each child element and then bind the event. I am binding the event to parent node itself and then find the click target using event.target. This has great performance benefits as you can already see.

answered Jul 2, 2020 at 8:17

Sachin Singh

9681 gold badge11 silver badges19 bronze badges

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

5 Comments

Devansh Pandey Over a year ago

I am creating the table using HTML DOM and this isn't working

Sachin Singh Over a year ago

Do you mean: you are using JavaScript to create the table? The code you have shared has an event handler onclick. Your return statement is inside event handler function and not the parent function. So obviously you won't get rowIndex this way. You might have to change the solution. You can share a jsfiddle with me so that I know what exactly you want to achieve. May be I can help you out there.

Devansh Pandey Over a year ago

Sure, here is the link - jsfiddle.net/devansh8373/5Lbrgf0k/1/#&togetherjs=gS8hLlf47i

Sachin Singh Over a year ago

Hi @DevanshPandey, Looking at your code, I have created a fiddle implements the functionality that you want to implement. Here's the link to it: jsfiddle.net/y5jx379b

Sachin Singh Over a year ago

Please note that you don't need row and column indexes to implement it.

Collectives™ on Stack Overflow

Returning Row Index from JavaScript function ,returns undefined

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related