CODEWITHSUNDEEP
javascriptjqueryhtml-table
Jason Kelly
Jason Kelly

Reputation: 2655

Re-ordering table number sequence after a row has been removed

I need your help, and was wondering as to whether or not it was possible to re-number the first table column based on the number of total number table rows in my table.

The problem is this, once a row has been removed at the click of a button, the first left table column is now not is an organized fashion.

Hence, I was wondering if it was possible to scrap the numbers and re-number the left column accordingly, (much like the behaviour of MS Excel if a row is removed).

I am jQuery friendly :)

Here is the HTML markup:

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<style type="text/css">

.highlight {

    background-color: rgb(255,0,0);

}

</style>

<script type="text/javascript">

window.onload = function() {

var rowCount = $('#data >tbody >tr').length;
$("#maxrows").val(rowCount);

    var $tbody = $("#data tbody").on('click', 'tr', function() {
            highlight($(this));
    });


    $('#goto_first').click(function() {
        var $first = $tbody.find('tr').first();
            highlight($first);
    });

    $('#goto_prev').click(function() {
        var $prev = $tbody.find('.highlight').prev();
            highlight($prev);
    });


    $('#goto_next').click(function() {
        var $next = $tbody.find('.highlight').next();
            highlight($next);
    });

    $('#goto_last').click(function() {
        var $last = $tbody.find('tr').last();
            highlight($last);
    });

    $('#goto_row').click(function() {

        var $row = prompt("Enter row number")

        highlight($("#data tr").eq($row));

    });

    $('#remove_row').click(function() {

        var $row = $tbody.find('.highlight')

        $row.remove();

    });


    function highlight($row) {
            if ($row.length) {
                $tbody.children().removeClass("highlight");
                $row.addClass('highlight');
                $("#rownum").val($row[0].rowIndex);
            }
    }

}
</script>

</head>

<body>

<table id="data" border="1" cellspacing="1" cellpadding="1">

    <thead>
        <tr>
            <th>#</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
            <th>header5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>2</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>3</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>4</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>5</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>6</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>
Row Number:
<br>
<input type="text" id="rownum" readonly><br>
of
<br>
<input type="text" id="maxrows" readonly>
<br>
<input type="button" id="goto_first" value="first">
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
<input type="button" id="goto_row" value="goto row">
<input type="button" id="remove_row" value="remove row">

</body>
</html>

Upvotes: 0

Views: 1584

Answers (2)

ryantdecker
ryantdecker

Reputation: 1810

Not sure how I stumbled on this old question after 4 years, but this seemed like a great use case for CSS counters - that way there's no JS needed, as the content will be updates as the numbers change. Just adding a class to number cell of each row, and then some pretty light CSS will make this quite flexible:

Updated Table Row HTML:

<tr>
  <td class="row-number"></td>
  <td>data</td>
  <td>data</td>
  <td>data</td>
  <td>data</td>
</tr>

CSS:

tbody {
  counter-reset: row-counter;
}
tr {
  counter-increment: row-counter;
}
td.row-number:before {
  content: counter(row-counter);
}

Working example: https://codepen.io/anon/pen/gjXRmW

Upvotes: 0

pmandell
pmandell

Reputation: 4328

You could do something like this:

$('#remove_row').click(function () {
    var $row = $tbody.find('.highlight')
    $row.remove();
    renumberRows();
});

function renumberRows() {
    $('#data tr').each(function(index, el){
        $(this).children('td').first().text(index++);
    });
}

You can a working example here: Fiddle.

Upvotes: 2

Related Questions