Count and write table rows with JS

Question

i have html table layout from cms. The table can have various rows and from the cms side i can't count it.

But in the table i want to have first column with count number for every row.

I found how i can count all rows number with JS but can't find how to let JS to write numbers in specific column for every row.

my table looks like

<table id="mytable">
<tr>
<td class="number">...here i want number 1</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>

<tr>
<td class="number">...here i want number 2</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>

Thank you a lot for any advices..

are you using react, angular, vue or just JavaScript with HTML? — Islam Y-
– Islam Y-, Commented Sep 4, 2022 at 9:46

Mina · Accepted Answer · 2022-09-04 10:24:18Z

2

The table has rows property, you can loop through, and on each row get first cell and update it's textContent with the row with index + 1

const table = document.getElementById('mytable');

[...table.rows].forEach((row, i) => {
  row.cells[0].textContent = i + 1;
});

<table id="mytable">
<tr>
<td class="number">...here i want number 1</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>

<tr>
<td class="number">...here i want number 2</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>

UPDATE

rows is an HTMLCollection ( array-like object ), which hasn't the forEach function, you need to convert it to an array by the spread operator [...table.rows], so you can use forEach and loop through.

edited Sep 4, 2022 at 10:24

answered Sep 4, 2022 at 9:47

Mina

17.8k3 gold badges24 silver badges39 bronze badges

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

3 Comments

Tob Over a year ago

Just keep in mind, that this can fail in older browsers, other than this, that’s the correct answer

Adamo Over a year ago

thank you. but im not sure what you mean by the dots... i try [row = table.getElementsByTagName('tr')].forEach((row, i) => but it don work..

Mina Over a year ago

rows is an HTMLCollection which is array-like object, which hasn't the forEach function, you need to convert it to an array by the spread operator [...table.rows], so you can use forEach and loop through.

KooiInc · Accepted Answer · 2022-09-04 10:19:16Z

1

You can use js to set a data-attribute with the row number and css (:after pseudo selector) to display that. To avoid numbering of possible header rows, find only rows in the table body (demo in snippet).

// rows for the body of the table (so, header row not counted)
document.querySelectorAll(`#mytable tbody tr td:first-child`)
  .forEach((rowNrCell, i) => rowNrCell.dataset.rownumber = i + 1);

.number {
  text-align: right;
  padding-right: 3px;
}

.number:after {
  content: '#'attr(data-rownumber);
  font-weight: bold;
  color: red;
}

<table id="mytable">
  <thead>
    <tr>
      <th>row</th>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
    </tr>
  </thead>
  <tr>
    <td class="number"></td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>

  <tr>
    <td class="number"></td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
</table>

edited Sep 4, 2022 at 10:19

answered Sep 4, 2022 at 10:07

KooiInc

124k32 gold badges145 silver badges181 bronze badges

1 Comment

Mina Over a year ago

It's the first time I know that It's possible to use attr inside CSS, +1 for that.

Islam Y- · Accepted Answer · 2022-09-04 09:45:42Z

When you have a data source coming as an array, or a list, it would look something like this if you're receiving JSON over the network:

{
   users: [
      {
          id: 87126421901,
          name: "Kemal Uyson"
      },
      {
          id: 67212221901,
          name: "Murat Pasa"
      },
      {
          id: 99121924122,
          name: "Yasser Omer"
      },
   ]
}

you can use it as it is when saving this response into a variable:

const users = response.data.users // [ the array of users above ]

then you can consume it by looping over the array and printing the index of the item in the array as the number. of the table row, for instance:

const users = response.data.users // [ the array of users above ]

users.map((row, i)=>{
  // your code here (depends, are you using native JavaScript, React, VUE, Angular ...etc ?)
  // then eventually somewhere here you'll have something like this:
  <td>${i + 1}</td> // i + 1 because i initially equals zero
})

Tob · Accepted Answer · 2022-09-04 09:53:16Z

0

If you just have vanilla js, you can insert a td on tr level.

Use querselectorAll to iterate and do a plus 1 on the index in that loop.

So you have to do createElement and on the tr in the list you call prepend.

See prepend docs

answered Sep 4, 2022 at 9:53

Tob

9937 silver badges11 bronze badges

Collectives™ on Stack Overflow

Count and write table rows with JS

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related