Question

我有一个带有两个按钮的表，下一个和上一个。它们会触发下一行或上一行的单击。

加载页面时的初始位置应为data-index：1

所以我想点击表格。我将当前位置保存在名为“数据值”的当前Div中。

如何创建'循环'？示例position是data-index = 0的行。上一个按钮的下一个位置将是表格的最后一行。

这是我的fiddle

$(document).ready(function() {
  var currentRow = 1;
  $('#patentResults tr').click(function(e) {
    e.preventDefault();
    var currentRow = +$(this).attr("data-index");
    console.log('row clicked ', currentRow);
    $('#rowPosition').attr('data-value', currentRow);
  });
});

$('#prevDoc').click(function(e) {
  e.preventDefault();
  var currentPos = +$('#rowPosition').attr("data-value");
  console.log(currentPos);
  currentPos = currentPos - 1;
  $('#rowPosition').attr('data-value', currentPos);
  $('#patentResults tr').attr("data-index", currentPos).click();
});
$('#nextDoc').click(function(e) {
  e.preventDefault();
  var currentPos = +$('#rowPosition').attr("data-value");
  console.log(currentPos);
  currentPos = currentPos + 1;
  $('#rowPosition').attr('data-value', currentPos);
  $('#patentResults tr').attr("data-index", currentPos).click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">


<div class="col-lg-6 docButtons">
  <div id="rowPosition" data-value="1"></div>
  <a id="prevDoc" class="btn btn-default" role="button"> <i class="fa fa-chevron-left"></i> Previous</a>
  <a id="nextDoc" class="btn btn-default" role="button"> <i class="fa fa-chevron-right"></i> Next</a>
</div>
<table id="patentResults" class="table table-hover table-striped">
  <thead>
    <tr>
      <th style="">
        <div class="th-inner ">Title</div>
        <div class="fht-cell"></div>
      </th>
      <th class="clickable" style="text-align: center; width: 130px; ">
        <div>
          Publication Date</div>
        <div class="fht-cell"></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr data-index="0">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="1">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="2">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="3">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="4">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="5">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="6">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="7">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="8">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
    <tr data-index="9">
      <td style="">Methods and systems to enhance foam generation and quality through dispenser</td>
      <td class="clickable" style="text-align: center; width: 120px; ">A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00</td>

    </tr>
  </tbody>
</table>

Answer 1

获取总行数。在#nextDoc点击使用modulus(%) opeartor和#prevDoc点按集data-index至totalRow如果currentRow小于零（0），如下所示。

var currentRow = 1;
var totalRow = $('#patentResults tbody tr').length; //number of total rows

$('#patentResults tr').click(function (e) {
    e.preventDefault();
    var currentRow = +$(this).attr("data-index");

    $('#rowPosition').attr('data-value', currentRow);
});

$('#prevDoc').click(function (e) {
    e.preventDefault();
    var currentPos = +$('#rowPosition').attr("data-value");
    currentPos = currentPos - 1;
    currentPos = currentPos < 0 ? totalRow - 1 : currentPos; // added this line
    $('#rowPosition').attr('data-value', currentPos);
});

$('#nextDoc').click(function (e) {
    e.preventDefault();
    var currentPos = +$('#rowPosition').attr("data-value");
    currentPos = (currentPos + 1) % totalRow; // changed this line
    $('#rowPosition').attr('data-value', currentPos);
});

UPDATED FIDDLE

Answer 2

检查一下这可能会给你一个想法..

  $index = 0;
  $('#Next').click(function(){
    $prev = $index - 1;
    $next = $index;
    $('table').find('tr:eq('+$prev+')').removeClass('highlighted');
    $('table').find('tr:eq('+$next+')').addClass('highlighted');
    $index = $index + 1;

  });

  $('#Prev').click(function(){
    $index = $index - 1;
    $prev = $index - 1;
    $('table').find('tr:eq('+$index+')').removeClass('highlighted');
    $('table').find('tr:eq('+$prev+')').addClass('highlighted');
  });

http://jsfiddle.net/HVw7E/440/

Answer 3

检查以下链接

Demo

使用上一个和下一个单击表格行

3 个答案:

UPDATED FIDDLE