web-dev-qa-db-fra.com

Numéroter automatiquement les lignes du tableau?

J'ai le tableau HTML suivant:

<table border="1">
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>
</table>

J'aimerais que chaque ligne de ce tableau ait un numéro automatiquement attribué à chaque élément.

Comment pouvait-il faire?

javascripthtml-table
42
Michael

Le CSS suivant énumère les lignes de table ( démo ):

table {
    counter-reset: rowNumber;
}

table tr {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

table {
  counter-reset: rowNumber;
}
table tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}
<table border="1">
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>
</table>

Si le CSS ne peut pas être utilisé, essayez le code JavaScript suivant ( demo ):

var table = document.getElementsByTagName('table')[0],
    rows = table.getElementsByTagName('tr'),
    text = 'textContent' in document ? 'textContent' : 'innerText';

for (var i = 0, len = rows.length; i < len; i++){
    rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
}

var table = document.getElementsByTagName('table')[0],
  rows = table.getElementsByTagName('tr'),
  text = 'textContent' in document ? 'textContent' : 'innerText';

for (var i = 0, len = rows.length; i < len; i++) {
  rows[i].children[0][text] = i + ': ' + rows[i].children[0][text];
}
<table border="1">
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>
</table>
82
David Thomas

Et si vous utilisiez également des en-têtes, voici ce dont vous avez besoin: http://jsfiddle.net/davidThomas/7RyGX/

table {
    counter-reset: rowNumber;
}

table tr:not(:first-child) {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

notez le: ": pas (: premier enfant)" là-dedans.

23
user3691833

Voici une modification de la solution CSS de David Thomas qui fonctionne avec ou sans ligne d'en-tête dans le tableau. Il incrémente le compteur sur la première cellule td de chaque ligne (sautant ainsi la ligne avec uniquement les cellules th):

table
{
    counter-reset: rowNumber;
}

table tr > td:first-child
{
    counter-increment: rowNumber;
}

table tr td:first-child::before
{
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

Vous pouvez voir le comportement dans this jsfiddle .

9
ConnorsFan

Voici une solution javascript qui ajoutera une cellule au début de chaque ligne, cette cellule sera utilisée pour la numérotation, s'il y a une cellule th cela obtient un colspan=2 attribut.

var addNumeration = function(cl){
  var table = document.querySelector('table.' + cl)
  var trs = table.querySelectorAll('tr')
  var counter = 1
  
  Array.prototype.forEach.call(trs, function(x,i){
    var firstChild = x.children[0]
    if (firstChild.tagName === 'TD') {
      var cell = document.createElement('td')
      cell.textContent = counter ++
      x.insertBefore(cell,firstChild)
    } else {
      firstChild.setAttribute('colspan',2)
    }
  })
}

addNumeration("test")
<table class="test" border="1">
  <tr>
   <th>hi!</th>
  </tr>
  <tr>
    <td>blue</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr>
    <td>black</td>
  </tr>

</table>
0
maioman