将索引设置为表行

时间：2017-08-22 08:33:07

标签： javascript jquery html

我有一个有30行的表。 我编写了下面的代码来为每一行设置数字索引。从1到30 这段代码很好用。 但是当调用的变量：cyrrentpage有2作为内容时。行号在索引之前加1。而不是从31开始。 我该怎么办 ？ 这是我的片段：

＆＃13;
＆＃13; 
var cyrrentpage =2
if(cyrrentpage == 1)
{
  $(".row_number").each(function(index, element) {
    $(this).text( $(this).closest("tr").index()+1)
});
}
else
{
$(".row_number").each(function(index, element) {
          
  if(index == 50)
  {
    $(this).text("cyrrentpage 0");        
  }
          else{
    $(this).text( (cyrrentpage-1).toString()+($(this).closest("tr").index()+1).toString())
        }
});
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
</table>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

该行

$(this).text( (cyrrentpage-1).toString()+($(this).closest("tr").index()+1).toString())

应该是

$(this).text(30*(cyrrentpage-1).toString()+ +($(this).closest("tr").index()+1).toString())

请注意，一元+会将其转换为数字。

答案 1 :(得分：1)

var cyrrentpage =2;
var amount = 30;
$(".row_number").each(function(index, element) {
    $(this).text( ($(this).closest("tr").index()+((cyrrentpage-1)*amount))+1)
});


var cyrrentpage =2;
var amount = 30;
$(".row_number").each(function(index, element) {
    $(this).text( ($(this).closest("tr").index()+((cyrrentpage-1)*amount))+1)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
<tr><td class="row_number">1</td><td> hello</td></tr>
</table>

答案 2 :(得分：0)

您正在调整字符串，而不是添加数字。 

(cyrrentpage-1).toString()+($(this).closest("tr").index()+1)‌​.toString()

根据您的评论，如果您想以31开始第二页，以下表达式将适合您：

$(this).text(((cyrrentpage - 1) * 30) + ($(this).closest("tr").index() + 1));


var cyrrentpage = 2
if (cyrrentpage == 1) {
  $(".row_number").each(function(index, element) {
    $(this).text($(this).closest("tr").index() + 1)
  });
} else {
  $(".row_number").each(function(index, element) {

    if (index == 50) {
      $(this).text("cyrrentpage 0");
    } else {
      $(this).text(((cyrrentpage - 1) * 30) + ($(this).closest("tr").index() + 1));
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
  <tr>
    <td class="row_number">1</td>
    <td> hello</td>
  </tr>
</table>

答案 3 :(得分：0)

更改此

$(this).text( (cyrrentpage-1).toString()+($(this).closest("tr").index()+1).toString())

到

$(this).text(($(this).closest("tr").index()+1) + 30*(cyrrentpage-1));

答案 4 :(得分：-1)

你可以在CSS中做同样的事情。我拿你的代码并制作这个演示

http://jsfiddle.net/AGYnt/139/ 

body
{
    counter-reset: Serial;           /* Set the Serial counter to 0 */
}

table
{
    border-collapse: separate;
}

tr td:first-child:before
{
  counter-increment: Serial;      /* Increment the Serial counter */
  content:counter(Serial); /* Display the counter */
}
相关问题
最新问题