How to put an id to a tr if it does not have an id?

Question

How to put an id to a tr if it does not have an id?

Navigation

#1 by (1 votes)

1

(I'm not sure what title to put in the question if someone has a better one please let me know)

Good afternoon what I want to do is put a different id to all the tr that do not have one.

E could insert ID to the tr of the table but it puts the same ID to all (Put inspect code there you see that all have "id = 1") and put an if so that only put the id to those tr that do not have one but It only works in the first tr.

Someone knows how to do so in the for that I have verify one by one to the tr seeing if the first does not have id because only that one puts an id and then go to verify the other and so on without affecting the other rows.

Or in any case there is some way that datatable put an id or a counter to the tr?

$(document).ready(function() {
  valor = 7;
  for (var i = 1; i <= valor; i++) {

    if ($("table tbody tr").attr('id')) {

    } else {

      $("table tbody tr").attr('id', i);
    }
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="table" class="table table-striped table-bordered table-hover dataTable" style="width: 100%;" role="grid" aria-describedby="example_info">
  <thead>
    <tr>
      <th style="width: 50px;max-width: 50px;min-width: 50px;">ITEM</th>
      <th style="width: 250px;max-width: 250px;min-width: 250px;">APELLIDOS Y NOMBRES</th>
      <th style="width: 150px;max-width: 150px;min-width: 150px;">DNI</th>
      <th style="width: 150px;max-width: 150px;min-width: 150px;">CARGO</th>
      <th style="width: 150px;max-width: 150px;min-width: 150px;">ÁREA</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td>1</td>
      <td>Juan</td>
      <td>54678912</td>
      <td>cargo</td>
      <td>area</td>
    </tr>

    <tr role="row" class="odd">
      <td>2</td>
      <td>Carlos</td>
      <td>1245678</td>
      <td>cargo</td>
      <td>area</td>
    </tr>

    <tr role="row" class="odd">
      <td>3</td>
      <td>Pedro</td>
      <td>45678932</td>
      <td>cargo</td>
      <td>area</td>
    </tr>

    <tr role="row" class="odd">
      <td>4</td>
      <td>Jorge</td>
      <td>87654231</td>
      <td>cargo</td>
      <td>area</td>
    </tr>

  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

javascript jquery datatables

asked by Luis 12.07.2018 в 19:34

source

1 answer

Dates and export table Email to external domains

score 1 · Accepted Answer

The problem is that the selector returns all the trs. The solution is to iterate through all the trs and add the id. You can use jQuery's $.each like this:

$(document).ready(function() {  
    var trs = $("table tbody tr");
    $.each(trs, function(i, tr) {
      if (!$(tr).attr('id')) {    
        $(tr).attr('id', i + 1);
      }
    });  
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="table" class="table table-striped table-bordered table-hover dataTable" style="width: 100%;" role="grid" aria-describedby="example_info">
  <thead>
    <tr>
      <th style="width: 50px;max-width: 50px;min-width: 50px;">ITEM</th>
      <th style="width: 250px;max-width: 250px;min-width: 250px;">APELLIDOS Y NOMBRES</th>
      <th style="width: 150px;max-width: 150px;min-width: 150px;">DNI</th>
      <th style="width: 150px;max-width: 150px;min-width: 150px;">CARGO</th>
      <th style="width: 150px;max-width: 150px;min-width: 150px;">ÁREA</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td>1</td>
      <td>Juan</td>
      <td>54678912</td>
      <td>cargo</td>
      <td>area</td>
    </tr>

    <tr role="row" class="odd">
      <td>2</td>
      <td>Carlos</td>
      <td>1245678</td>
      <td>cargo</td>
      <td>area</td>
    </tr>

    <tr role="row" class="odd">
      <td>3</td>
      <td>Pedro</td>
      <td>45678932</td>
      <td>cargo</td>
      <td>area</td>
    </tr>

    <tr role="row" class="odd">
      <td>4</td>
      <td>Jorge</td>
      <td>87654231</td>
      <td>cargo</td>
      <td>area</td>
    </tr>

  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>