Count and write table rows with JS-CodePudding

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 >...here i want number 1</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>

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

Thank you a lot for any advices..

CodePudding user response：

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 >...here i want number 1</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>

<tr>
<td >...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.

CodePudding user response：

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 ></td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>

  <tr>
    <td ></td>
    <td>content</td>
    <td>content</td>
    <td>content</td>
  </tr>
</table>

CodePudding user response：

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

CodePudding user response：

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