Javascript 删除行后重新排序表编号序列_Javascript_Jquery_Html Table

Javascript 删除行后重新排序表编号序列

javascript jquery

Javascript 删除行后重新排序表编号序列,javascript,jquery,html-table,Javascript,Jquery,Html Table,我需要您的帮助，我想知道是否可以根据我的表中的表行总数对第一个表列重新编号问题在于，单击按钮删除一行后，左表的第一列现在不再是一种有组织的方式因此，我想知道是否有可能废弃这些数字，并相应地对左列重新编号（很像MS Excel删除一行时的行为）我对jQuery很友好：）以下是HTML标记： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/li

我需要您的帮助，我想知道是否可以根据我的表中的表行总数对第一个表列重新编号

问题在于，单击按钮删除一行后，左表的第一列现在不再是一种有组织的方式

因此，我想知道是否有可能废弃这些数字，并相应地对左列重新编号（很像MS Excel删除一行时的行为）

我对jQuery很友好：）

以下是HTML标记：

<!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>


.亮点{
背景色：rgb（255,0,0）；
}
window.onload=函数（）{
var rowCount=$（'#data>tbody>tr'）。长度；
$（“#maxrows”）.val（行数）；
var$tbody=$（“#数据tbody”）。在（'click'，'tr'，function（）上{
突出显示（$（此））；
});
$（'goto#u first'）。单击（函数（）{
var$first=$tbody.find（'tr'）.first（）；
突出显示（$第一）；
});
$（'goto#u prev'）。单击（函数（）{
var$prev=$tbody.find（'.highlight'）.prev（）；
突出显示（$prev）；
});
$（“#转到下一步”）。单击（函数（）{
var$next=$tbody.find（'.highlight'）.next（）；
突出显示（下一步）；
});
$（'goto#u last'）。单击（函数（）{
var$last=$tbody.find（'tr'）.last（）；
突出显示（$last）；
});
$（“#转到行”）。单击（函数（）{
var$row=提示（“输入行号”）
突出显示（$（“#数据tr”）.eq（$row））；
});
$（“#删除_行”）。单击（函数（）{
var$row=$tbody.find（'.highlight'）
$row.remove（）；
});
功能突出显示（$row）{
如果（$row.length）{
$t body.children（）.removeClass（“突出显示”）；
$row.addClass（'highlight'）；
$（“#rownum”）.val（$row[0].rowIndex）；
}
}
}
#
校长2
校长3
校长4
校长5
1.
数据
数据
数据
数据
2.
数据
数据
数据
数据
3.
数据
数据
数据
数据
4.
数据
数据
数据
数据
5.
数据
数据
数据
数据
6.
数据
数据
数据
数据
行数：




属于

您可以这样做：

$('#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++);
    });
}

您可以在这里找到一个工作示例：。

不确定4年后我是如何偶然发现这个老问题的，但这似乎是CSS计数器的一个很好的用例-这样就不需要JS，因为内容将随着数字的变化而更新。只需在每行的数字单元格中添加一个类，然后使用一些非常轻的CSS，这将使其非常灵活：

更新的表格行HTML:

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

工作示例：

哦，jQuery的强大功能。我会尽快接受你的答复。工作得很有魅力，再次感谢！

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