title: Click through table rows with previous and next
body: <p>I have a table with two buttons, next and previous. They trigger a click on the next or previous row. </p>
  
  <p>The initial position when the page is loaded should be data-index: 1</p>
  
  <p>So I would like to click through the table. I save the current position in a current Div named 'data-value'.</p>
  
  <p>How can I create a 'loop'? Example The position is row with data-index=0. Next Position of the previous-Button will be the last row of the table.</p>
  
  <p>Here is my <a href="https://jsfiddle.net/dtzrxc51/7/" rel="nofollow">fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
  
  
  &lt;div class="col-lg-6 docButtons"&gt;
    &lt;div id="rowPosition" data-value="1"&gt;&lt;/div&gt;
    &lt;a id="prevDoc" class="btn btn-default" role="button"&gt; &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt; Previous&lt;/a&gt;
    &lt;a id="nextDoc" class="btn btn-default" role="button"&gt; &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt; Next&lt;/a&gt;
  &lt;/div&gt;
  &lt;table id="patentResults" class="table table-hover table-striped"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th style=""&gt;
          &lt;div class="th-inner "&gt;Title&lt;/div&gt;
          &lt;div class="fht-cell"&gt;&lt;/div&gt;
        &lt;/th&gt;
        &lt;th class="clickable" style="text-align: center; width: 130px; "&gt;
          &lt;div&gt;
            Publication Date&lt;/div&gt;
          &lt;div class="fht-cell"&gt;&lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr data-index="0"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="1"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="2"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="3"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="4"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="5"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="6"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="7"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="8"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr data-index="9"&gt;
        &lt;td style=""&gt;Methods and systems to enhance foam generation and quality through dispenser&lt;/td&gt;
        &lt;td class="clickable" style="text-align: center; width: 120px; "&gt;A23F 5/42 ,A23F 5/40 ,A23V202/00 ,A23C210/30 ,A23C 11/00&lt;/td&gt;
  
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>