如何在右箭头上将表格水平滚动到最后一个td？

时间：2019-02-04 10:37:58

标签： javascript jquery html css

我想在右键单击时一一td滚动表，然后在单击左键时反向一遍。我在桌上使用过.animate，但是滚动位置不会移动，整个表格只会移动，这只是第一时间。请帮助我不明白。谢谢。

$('.right').click(function() {
  $('.table').animate({
    right: '120px',
  })
});
.table {
  border: 1px solid #dcddde;
  border-top: 0;
  margin: 0;
  width: 800px;
  position: relative;
}

.table-responsive {
  overflow: scroll;
  width: 600px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="left">left</button>
<button class="right">right</button>
<div class="table-responsive">
  <table border="1" cellspacing="0" class="table">
    <tbody>
      <tr>
        <th style="width:auto">Quantity in piece(s)</th>
        <th>Logistics</th>
        <th>MOQ</th>
        <th>100-199</th>
        <th>200-299</th>
        <th>300-399</th>
        <th>400+</th>
      </tr>
      <tr>
        <td>
          <div class="">South Africa Warehouse (€ )</div>
        </td>
        <td>
          <span class="included">Included</span>
        </td>
        <td>
          <span class="included">100</span>
        </td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
      </tr>
      <tr>
        <td>Lead Time (Days)</td>
        <td></td>
        <td></td>
        <td>34</td>
        <td>34</td>
        <td>323</td>
        <td>23</td>
      </tr>
    </tbody>
  </table>
</div>

4 个答案:

答案 0 :(得分：3)

要执行此操作，您需要为溢出的div的scrollLeft属性设置动画，而不是right本身的table位置。

您可以通过简单地在元素上设置一个类并根据单击的按钮移动该类来跟踪需要与哪个td对齐。然后，您可以检索其position()并调用animate()，如下例所示。请注意，我在表中添加了更多列以使滚动效果更加明显。

var $table = $('.table-responsive');

$('.move').click(function() {
  var $target = $table.find('td.target');
  if ($target.length == 0)
    $target = $table.find('td:first');
    
  $target = $target[$(this).data('dir')]('td');
  if ($target.length == 0) 
    return;  
  
  $('.table-responsive').stop().animate({ scrollLeft: $target.position().left })  ;
  $table.find('.target').removeClass('target');
  $target.addClass('target');
});
.table {
  border: 1px solid #dcddde;
  border-top: 0;
  margin: 0;
  width: 800px;
  position: relative;
}

.table-responsive {
  overflow: scroll;
  width: 600px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="move" data-dir="prev">left</button>
<button class="move" data-dir="next">right</button>
<div class="table-responsive">
  <table border="1" cellspacing="0" class="table">
    <tbody>
      <tr>
        <th style="width:auto">Quantity in piece(s)</th>
        <th>Logistics</th>
        <th>MOQ</th>
        <th>100-199</th>
        <th>200-299</th>
        <th>300-399</th>
        <th>400+</th>
      </tr>
      <tr>
        <td>
          <div class="">South Africa Warehouse (€ )</div>
        </td>
        <td>
          <span class="included">Included</span>
        </td>
        <td>
          <span class="included">100</span>
        </td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
      </tr>
      <tr>
        <td>Lead Time (Days)</td>
        <td></td>
        <td></td>
        <td>34</td>
        <td>34</td>
        <td>323</td>
        <td>23</td>
        <td>34</td>
        <td>34</td>
        <td>323</td>
        <td>23</td>
        <td>34</td>
        <td>34</td>
        <td>323</td>
        <td>23</td>
        <td>34</td>
        <td>34</td>
        <td>323</td>
        <td>23</td>
      </tr>
    </tbody>
  </table>
</div>

答案 1 :(得分：1)

嗨，您可以尝试使用scrollLeft，这里是一个有效的示例：

$('.right').click(function(){
  $('.table-responsive').animate(
  { scrollLeft: '+=50' }, 100)
});

$('.left').click(function(){
$('.table-responsive').animate(
  { scrollLeft: '-=50' }, 100)
});
.table {
    border: 1px solid #dcddde;
    border-top: 0;
    margin: 0;
    width:800px;
    position:relative;
}
.table-responsive{
 overflow:scroll;
 width:600px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="left">left</button>
<button class="right">right</button>
<div class="table-responsive">
   <table border="1" cellspacing="0" class="table">
      <tbody>
         <tr>
            <th style="width:auto">Quantity in piece(s)</th>
            <th>Logistics</th>
            <th>MOQ</th>
            <th>100-199</th>
            <th>200-299</th>
            <th>300-399</th>
            <th>400+</th>
         </tr>
         <tr>
            <td>
               <div class="">South Africa Warehouse (€ )</div>
            </td>
            <td>
               <span class="included">Included</span>
            </td>
            <td>
               <span class="included">100</span>
            </td>
            <td>€23.0000</td>
            <td>€23.0000</td>
            <td>€23.0000</td>
            <td>€23.0000</td>
         </tr>
         <tr>
            <td>Lead Time (Days)</td>
            <td></td>
            <td></td>
            <td>34</td>
            <td>34</td>
            <td>323</td>
            <td>23</td>
         </tr>
      </tbody>
   </table>
</div>

答案 2 :(得分：1)

使用this answer to an earlier question：

将您的JS切换至：

$('.right').click(function() {
  event.preventDefault();
  $('.table-responsive').animate({
    scrollLeft: "+=120px"
  }, "slow");
});

 $('.left').click(function() {
  event.preventDefault();
  $('.table-responsive').animate({
    scrollLeft: "-=120px"
  }, "slow");
});

保持html和css相同。

结果：

$('.right').click(function() {
  event.preventDefault();
  $('.table-responsive').animate({
    scrollLeft: "+=120px"
  }, "slow");
});

 $('.left').click(function() {
  event.preventDefault();
  $('.table-responsive').animate({
    scrollLeft: "-=120px"
  }, "slow");
});
.table {
  border: 1px solid #dcddde;
  border-top: 0;
  margin: 0;
  width: 800px;
  position: relative;
}

.table-responsive {
  overflow: scroll;
  width: 600px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="left">left</button>
<button class="right">right</button>
<div class="table-responsive">
  <table border="1" cellspacing="0" class="table">
    <tbody>
      <tr>
        <th style="width:auto">Quantity in piece(s)</th>
        <th>Logistics</th>
        <th>MOQ</th>
        <th>100-199</th>
        <th>200-299</th>
        <th>300-399</th>
        <th>400+</th>
      </tr>
      <tr>
        <td>
          <div class="">South Africa Warehouse (€ )</div>
        </td>
        <td>
          <span class="included">Included</span>
        </td>
        <td>
          <span class="included">100</span>
        </td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
      </tr>
      <tr>
        <td>Lead Time (Days)</td>
        <td></td>
        <td></td>
        <td>34</td>
        <td>34</td>
        <td>323</td>
        <td>23</td>
      </tr>
    </tbody>
  </table>
</div>

答案 3 :(得分：-2)

您可以将td位置保持在变量中，并相应地移动到该方向。 我已经预先计算了列宽，并据此进行了滚动。

这是可行的解决方案。

var pos = 0, // holds the current td position
  columnCount = $('.table th').length, // columns count
  columnWidth = [];

// collect all column width and save in array
$.each($('.table th'), function(ind, elem) {
  columnWidth.push($(elem).width());
});

$('.right').click(function() {
  if (pos === columnCount - 1) return false; // dont scroll after last td

  pos++;

  var
    col = columnWidth.slice(0, pos),
    sum = col.reduce((pv, cv) => {
      return pv + (parseFloat(cv) || 0);
    }, 0); // calculate how much it has to be scroll to the right

  $('.table').animate({
    right: sum + 'px',
  });
});

$('.left').click(function() {
  if (pos === 0) return false; // dont scroll beyond first td

  pos--;

  var
    col = columnWidth.slice(0, pos),
    sum = col.reduce((pv, cv) => {
      return pv + (parseFloat(cv) || 0);
    }, 0);  // calculate how much it has to be scroll to the left

  $('.table').animate({
    right: sum + 'px',
  });
});
.table {
  border: 1px solid #dcddde;
  border-top: 0;
  margin: 0;
  width: 800px;
  position: relative;
}

.table-responsive {
  overflow: scroll;
  width: 600px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="left">left</button>
<button class="right">right</button>
<div class="table-responsive">
  <table border="1" cellspacing="0" class="table">
    <tbody>
      <tr>
        <th style="width:auto">Quantity in piece(s)</th>
        <th>Logistics</th>
        <th>MOQ</th>
        <th>100-199</th>
        <th>200-299</th>
        <th>300-399</th>
        <th>400+</th>
      </tr>
      <tr>
        <td>
          <div class="">South Africa Warehouse (€ )</div>
        </td>
        <td>
          <span class="included">Included</span>
        </td>
        <td>
          <span class="included">100</span>
        </td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
        <td>€23.0000</td>
      </tr>
      <tr>
        <td>Lead Time (Days)</td>
        <td></td>
        <td></td>
        <td>34</td>
        <td>34</td>
        <td>323</td>
        <td>23</td>
      </tr>
    </tbody>
  </table>
</div>

相关问题
最新问题