CODEWITHSUNDEEP
javascriptjqueryhtml
NulisDefo
NulisDefo

Reputation: 335

indexing table rows js/jquery

I've been tryin to index my table rows but unsuccessfully. The best I could do was come up with the code the could maybe reindex every row in the table everytime i add new table row, but it doesnt work. I think something is wrong with syntax, but I'm not sure what. JS part:

$("#pridet").click(function(){
  $("table tbody tr").first().clone().prependTo("table tbody");
  var x = document.getElementsByTagName("tr");
  document.getElementsByName("tabelis").innerHTML = x.rowIndex;
});

I realise something is fatally wrong with the second part (like directing where to write what index maybe?)

code on html file:

<button id = "pridet">pridet</button>
  <table id="myTable" class="table table-inverse">
    <thead id = "headings" class = "thead-default">
      <tr>
        <th>Tabelio Nr.</th>
        <th>Vardas</th>
        <th>Pavardė</th>
        <th>Pareigos</th>
        <th>Bazinė alga, €</th>
        <th>Valandinis atlyginimas, €</th>
        <th>Veiksmai</th>
      </tr>
    </thead>
    <tfoot class = "thead-default">
      <tr>
        <td>Vidurkis</td>
        <td></td>
        <td></td>
        <td></td>
        <td>10000</td>
        <td>17.3</td>
        <td></td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td class = "tabelis">1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>bla</td>
        <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
        <td>
          <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p>
          <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
        </td>
      </tr>
      <tr>
        <td class = "tabelis">2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>bla</td>
        <td>blum</td>
        <td>
          <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> -->
          <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> -->
        </td>
      </tr>
      <tr>
        <td class = "tabelis">3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>bla</td>
        <td>blum</td>
        <td>
          <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> -->
          <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> -->
        </td>
      </tr>
    </tbody>
  </table>
  <script src="script.js" charset="utf-8"></script>
  <script>
    function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
  };
  </script>

I could probably count the total number of rows with something like this

$("#counter").text( $("table tbody tr").length );

and use the value to insert numbers into table cells somehow

EDIT: didnt mention this before, but table rows have to eb added at the top of the table (below thead)

Upvotes: 0

Views: 186

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

Because you have the row index in the first column of body row you can select each one with:

$('#myTable tbody tr td:nth-child(1)')

and you can cycle using .each() to iterate on every index in order to update it.

function updateRowIndex() {
    $('#myTable tbody tr td:nth-child(1)').each(function(idx, ele) {
        ele.textContent = idx + 1;
    });
}

function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
    updateRowIndex();
};

$("#pridet").on('click', function(e) {
    $("table tbody tr").first().clone().prependTo("table tbody");
    var x = document.getElementsByTagName("tr");
    document.getElementsByName("tabelis").innerHTML = x.rowIndex;
    updateRowIndex();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id = "pridet">pridet</button>
<table id="myTable" class="table table-inverse">
    <thead id = "headings" class = "thead-default">
    <tr>
        <th>Tabelio Nr.</th>
        <th>Vardas</th>
        <th>Pavardė</th>
        <th>Pareigos</th>
        <th>Bazinė alga, €</th>
        <th>Valandinis atlyginimas, €</th>
        <th>Veiksmai</th>
    </tr>
    </thead>
    <tfoot class = "thead-default">
    <tr>
        <td>Vidurkis</td>
        <td></td>
        <td></td>
        <td></td>
        <td>10000</td>
        <td>17.3</td>
        <td></td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td class = "tabelis">1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>bla</td>
        <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
        <td>
            <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p>
            <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
        </td>
    </tr>
    <tr>
        <td class = "tabelis">2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>bla</td>
        <td>blum</td>
        <td>
            <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> -->
            <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> -->
        </td>
    </tr>
    <tr>
        <td class = "tabelis">3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>bla</td>
        <td>blum</td>
        <td>
            <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> -->
            <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> -->
        </td>
    </tr>
    </tbody>
</table>

Upvotes: 1

Sinha
Sinha

Reputation: 512

$("#pridet").click(function(){
  var new_row = $("table tbody tr").first().clone();
  $('table tbody').append(new_row);
  $('table tr:last').find('td:first').html($('table tbody tr').length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id = "pridet">pridet</button>
  <table id="myTable" class="table table-inverse" border='1'>
    <thead id = "headings" class = "thead-default">
      <tr>
        <th>Tabelio Nr.</th>
        <th>Vardas</th>
        <th>Pavardė</th>
        <th>Pareigos</th>
        <th>Bazinė alga, €</th>
        <th>Valandinis atlyginimas, €</th>
        <th>Veiksmai</th>
      </tr>
    </thead>
    <tfoot class = "thead-default">
      <tr>
        <td>Vidurkis</td>
        <td></td>
        <td></td>
        <td></td>
        <td>10000</td>
        <td>17.3</td>
        <td></td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td class = "tabelis">1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>bla</td>
        <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
        <td>
          <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p>
          <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
        </td>
      </tr>
      <tr>
        <td class = "tabelis">2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>bla</td>
        <td>blum</td>
        <td>
          <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> -->
          <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> -->
        </td>
      </tr>
      <tr>
        <td class = "tabelis">3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>bla</td>
        <td>blum</td>
        <td>
          <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-edit"></span></p> -->
          <!-- <p class = "btn" style = "width:10%; padding-bottom:0; margin-bottom:0; border-bottom:0"><span class = "fa fa-trash"></span></p> -->
        </td>
      </tr>
    </tbody>
  </table>

Upvotes: 2

Related Questions