Get table row index from row ID in TypeScript

Question

I have a table. Each row has an ID.

Can I get the index of any row by using only its ID (no click) and without using a loop?

My HTML looks like this:

<table id="tabId">
<tr id="a">
    <td>ss</td>
    <td>ss</td>
</tr>
<tr id="b">
    <td>kk</td>
    <td>kk</td>
</tr>

I tried this:

var row_number = document.getElementById('a').rowIndex;

but it's not working; I get an error message saying:

[ts] Property 'rowIndex' does not exist on type 'HTMLElement'.

It's a [property and not a method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/rowIndex) -> `document.getElementById(a).rowIndex` — Andreas, Nov 10 '17 at 07:25
@user2243952 here is the [answer](https://stackoverflow.com/a/37613166/3551786). And there `this` is same what you are getting by id. — Durga, Nov 10 '17 at 07:33
no, that solution need to click on the row. I need the index using only the id — user2243952, Nov 10 '17 at 07:42
The click is only to get the row, so yes you would have to adjust it a little bit... — Andreas, Nov 10 '17 at 07:56
@Andreas OP is looking answer for typescript, now I am also confused, my answer does works for me, but why not for him. — Durga, Nov 10 '17 at 07:59
[The property 'value' does not exist on value of type 'HTMLElement'](https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement) -> Cast as `HTMLTableRowElement` — Andreas, Nov 10 '17 at 08:12
@ Alexandru-IonutMihai: The OP has clarified in their comments that they're using TypeScript, for which the solutions given [there](https://stackoverflow.com/questions/37573622/how-do-i-get-current-rowindex-of-table-using-javascript) apparently don't work. — Ilmari Karonen, Nov 10 '17 at 16:44

score 2 · Answer 1 · answered Nov 10 '17 at 07:29

2

You forgot to add '' to the getElementById() function and you wrote rowIndex not as a property and wrong.

Here is a working example:

var row_number = document.getElementById('a').rowIndex;
alert(row_number);

<table id="tabId">
<tr id="a">
    <td>ss</td>
    <td>ss</td>
</tr>
<tr id="b">
    <td>kk</td>
    <td>kk</td>
</tr>

answered Nov 10 '17 at 07:29

Dario

618
1
11
28

rowindex does not exist on type htmlelement. – user2243952 Nov 10 '17 at 07:34
Are you sure you wrote everything right? Can you post your code again? – Dario Nov 10 '17 at 07:36
@user2243952 Then you've done something wrong. Run the snippet and you will see that it works – Andreas Nov 10 '17 at 07:36
1

i put a simpler example but my rows id is {{item.id}}. i'm using angular and typescript – user2243952 Nov 10 '17 at 07:38
Property 'rowIndex' does not exist on type 'HTMLElement'. – user2243952 Nov 10 '17 at 07:43
Sorry, but I can't help you if you don't post your code. – Dario Nov 10 '17 at 07:44
@user2243952 Then `document.getElementById()` doesn't return a table row... – Andreas Nov 10 '17 at 07:53
it does, using a loop I can get the row index matching my id. – user2243952 Nov 10 '17 at 08:07

score 2 · Accepted Answer · answered Nov 10 '17 at 08:18

2

var el = (document.getElementById('b')) as HTMLTableRowElement;
console.log(el.rowIndex);

answered Nov 10 '17 at 08:18

klugjo

19,422
8
57
75

score 0 · Answer 3 · edited Nov 10 '17 at 09:05

0

var rows = Array.prototype.slice.call(document.getElementById('tabId').rows);
var row = document.getElementById('b');

console.log(rows.indexOf(row));

Here is an Example

edited Nov 10 '17 at 09:05

Alex

4,885
3
19
39

answered Nov 10 '17 at 07:31

klugjo

19,422
8
57
75

Property 'rows' does not exist on type 'HTMLElement'. – user2243952 Nov 10 '17 at 07:40
https://jsbin.com/zozazok/edit?html,js,console – klugjo Nov 10 '17 at 07:54
1

@klugjo, it always a good idea to add additional explanation such as (example links) to the answer body itself. – Alex Nov 10 '17 at 09:03
1

Got it. I created the example after the comment saying it does not work. Will think of editing my answer instead next time – klugjo Nov 10 '17 at 10:58

user2243952 · Answer 4 · 2017-11-10T08:46:45.223

0

special thx to @durga for his solution. I fixed it by explicitly typing variable as any.

var el : any = (document.getElementById('a')) as HTMLTableElement;
var index = el.rowIndex;
console.log(index);

edited Nov 10 '17 at 08:46

answered Nov 10 '17 at 08:19

user2243952

277
3
6
12

Bhargav Chudasama · Answer 5 · 2017-11-10T07:33:58.857

-1

you can get using on click on particulate tr to get its index

or change you Rowindex to rowIndex and add '' in id of div 'a' in script

function myFunction(x) {
  console.log("Row index is: " + x.rowIndex);
}

<table id="tabId">
  <tr id="a" onclick="myFunction(this)">
    <td>ss</td>
    <td>ss</td>
  </tr>
  <tr id="b" onclick="myFunction(this)">
    <td>kk</td>
    <td>kk</td>
  </tr>

edited Nov 10 '17 at 07:33

answered Nov 10 '17 at 07:31

Bhargav Chudasama

6,928
5
21
39

I m not going to click on the row.. I just want to get the row index by using the id only. – user2243952 Nov 10 '17 at 07:33
so put athore solution mistake by you in code so solve this – Bhargav Chudasama Nov 10 '17 at 07:34

score -2 · Answer 6 · answered Nov 10 '17 at 07:27

-2

document.getElementsByTagName("tr")[index].id;


<table id="tableId">
    <tr id="a">
        <td>a</td>
    </tr>
    <tr id="b">
        <td>b</td>
    </tr>
</table>

var table = document.getElementById("tableId");
var row = table.rows[index];
console.log(row.id);

answered Nov 10 '17 at 07:27

bklups

300
1
13

The question is _"Can I get the row index of any row by its id whitout using a loop?"_ and not how to use this index O.o – Andreas Nov 10 '17 at 07:30
i need the opposite of this. – user2243952 Nov 10 '17 at 07:31

Get table row index from row ID in TypeScript

6 Answers6