Question

我有一张桌子，比方说，5行。第一个元素是带行号的跨度。

<tr>
    <td><span name="rowNum">1</span></td>
    <td>...stuff...</td>
</tr>
<tr>
    <td><span name="rowNum">2</span></td>
    <td>...stuff...</td>
</tr>    
<tr>
    <td><span name="rowNum">3</span></td>
    <td>...stuff...</td>
</tr>    
<tr>
    <td><span name="rowNum">4</span></td>
    <td>...stuff...</td>
</tr>
<tr>
    <td><span name="rowNum">5</span></td>
    <td>...stuff...</td>
</tr>

但是，我有一个可能删除表行的jquery函数。

我想在delete函数中添加一些代码，这些代码循环遍历跨度并将内容重置为正确的行号。例如。如果你删除第一行，span 2现在会说1，等等。

我想我会设置一个计数器= 1来表示应该的跨度值，然后遍历跨度，如果跨度文本不是=到计数器，则重置它。然后计数器应递增。

我只是想弄清楚如何循环跨越并获得它们的价值。

Answer 1

删除行后，您可以使用text方法更改跨度的文本内容，它会在内部使用each方法。

$('.rowNum span').text(function(index) {
   return ++index;
})

Answer 2

您只能使用CSS，不需要JavaScript：http://jsfiddle.net/brian_griffin/SNB89/

CSS

table { counter-reset: line-number;}
td:first-child:before {
content: counter(line-number) ".";
counter-increment: line-number;
padding-right: 0.3em; }

或如上所述使用<OL>（编号列表）。

循环跨越并重置/增加其文本

2 个答案:

CSS