固定テーブル左の列スライダー

Question

固定された左の2列を作成しましたスライダーで残りの列が必要です：左の矢印をクリックすると左の矢印を、右の矢印は右の矢印をクリックします。 添付の画像をご覧ください。

$(document).ready(function() { 
 
\t \t \t \t $("#fixTable").tableHeadFixer({"head" : false, "left" : 2}); 
 
\t \t \t });

#parent { 
 
\t \t \t \t height: 300px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t #fixTable { 
 
\t \t \t \t width: 1800px !important; 
 
\t \t \t } 
 
.arrow_postions{position: absolute;right:0; top:45%;}

<link rel="stylesheet" href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/assets/bootstrap-3.3.2/css/bootstrap.css"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
\t <script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/assets/jquery-2.1.3.js" type="text/javascript"></script> 
 
\t <script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/tableHeadFixer.js" type="text/javascript"></script> 
 

 
<table id="fixTable" class="table"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t <td class="text-center font16">J6W47EP#AC4</td> 
 
\t \t \t \t \t <td class="text-center font16 color0070c0">N6E89AV#002</td> 
 
\t \t \t \t \t <td class="text-center font16 color0070c0">N6E89AV#001</td> 
 
\t \t \t \t \t <td class="text-center font16 color0070c0">T4N02LT#AC4</td> 
 
\t \t \t \t \t <td class="text-center font16 color0070c0">N6E89AV#002</td> 
 
\t \t \t \t \t <td class="text-center font16 color0070c0">N6E89AV#002</td> 
 
\t \t \t \t \t <td class="text-center font16 color0070c0">T4N02LT#AC4</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>PROCESSOR</td> 
 
\t \t \t \t \t <td>B5E74AV-AMD A10 -5800B 3.8G 4M 100W CP</td> 
 
\t \t \t \t \t <td>B5E77AV - AMD A4-5300B TBD 1M 65W CPU</td> 
 
\t \t \t \t \t <td>D9E96AV - CPU A A4-5150M Dual Core</td> 
 
\t \t \t \t \t <td>E5T35AV-CPU I Core i7-4600M Dual Core</td> 
 
\t \t \t \t \t <td>B5E74AV-AMD A10 -5800B 3.8G 4M 100W CP</td> 
 
\t \t \t \t \t <td>B5E77AV - AMD A4-5300B TBD 1M 65W CPU</td> 
 
\t \t \t \t \t <td>B5E74AV-AMD A10 -5800B 3.8G 4M 100W CP</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>MEMORY</td> 
 
\t \t \t \t \t <td>D0A51AV-8GB DDR3-1600 SODIMM (1X8GB) B</td> 
 
\t \t \t \t \t <td>D0A53AV-8GB DDR3-1600 SODIMM (2x4GB) B</td> 
 
\t \t \t \t \t <td>D3B06AV-RAM 4GB 1600 DDR3L 1DM</td> 
 
\t \t \t \t \t <td>D3B06AV-RAM 4GB 1600 DDR3L 1DM</td> 
 
\t \t \t \t \t <td>D0A51AV-8GB DDR3-1600 SODIMM (1X8GB) B</td> 
 
\t \t \t \t \t <td>D0A53AV-8GB DDR3-1600 SODIMM (2x4GB) B</td> 
 
\t \t \t \t \t <td>D0A51AV-8GB DDR3-1600 SODIMM (1X8GB) B</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>STORAGE</td> 
 
\t \t \t \t \t <td>B6P51AV-500GB7200RPMSATA2.52ndSEDw/caH</td> 
 
\t \t \t \t \t <td>B6P51AV-500GB7200RPMSATA2.52ndSEDw/caH</td> 
 
\t \t \t \t \t <td>B6P51AV-500GB7200RPMSATA2.52ndSEDw/caH</td> 
 
\t \t \t \t \t <td>B6P51AV-500GB7200RPMSATA2.52ndSEDw/caH</td> 
 
\t \t \t \t \t <td>B6P51AV-500GB7200RPMSATA2.52ndSEDw/caH</td> 
 
\t \t \t \t \t <td>B6P51AV-500GB7200RPMSATA2.52ndSEDw/caH</td> 
 
\t \t \t \t \t <td>B6P51AV-500GB7200RPMSATA2.52ndSEDw/caH</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>SCREEN</td> 
 
\t \t \t \t \t <td>D8T46AV-LCD 14 LED HD+ SVA AG flat</td> 
 
\t \t \t \t \t <td>D9R81AV-LCD 14 LED HD+ SVA AG f/WWAN f</td> 
 
\t \t \t \t \t <td>E2P39AV-LCD 14 LED FHD UWVA AG</td> 
 
\t \t \t \t \t <td>D9R81AV-LCD 14 LED HD+ SVA AG f/WWAN f</td> 
 
\t \t \t \t \t <td>D8T46AV-LCD 14 LED HD+ SVA AG flat</td> 
 
\t \t \t \t \t <td>D9R81AV-LCD 14 LED HD+ SVA AG f/WWAN f</td> 
 
\t \t \t \t \t <td>D8T46AV-LCD 14 LED HD+ SVA AG flat</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>OS</td> 
 
\t \t \t \t \t <td>B0U22AV#AC4-Windows 7 Professional 64bit O</td> 
 
\t \t \t \t \t <td>B0U22AV#AC4-Windows 7 Professional 64bit O</td> 
 
\t \t \t \t \t <td>B0U22AV#AC4-Windows 7 Professional 64bit O</td> 
 
\t \t \t \t \t <td>B0U22AV#AC4-Windows 7 Professional 64bit O</td> 
 
\t \t \t \t \t <td>B0U22AV#AC4-Windows 7 Professional 64bit O</td> 
 
\t \t \t \t \t <td>B0U22AV#AC4-Windows 7 Professional 64bit O</td> 
 
\t \t \t \t \t <td>B0U22AV#AC4-Windows 7 Professional 64bit O</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>BATTERY</td> 
 
\t \t \t \t \t <td>D8T39AV-BATT 3C 50 WHr Long Life</td> 
 
\t \t \t \t \t <td>E2P23AV-BATT 3C 24 WHr Long Life</td> 
 
\t \t \t \t \t <td>E2P23AV-BATT 3C 24 WHr Long Life</td> 
 
\t \t \t \t \t <td>E2P23AV-BATT 3C 24 WHr Long Life</td> 
 
\t \t \t \t \t <td>D8T39AV-BATT 3C 50 WHr Long Life</td> 
 
\t \t \t \t \t <td>E2P23AV-BATT 3C 24 WHr Long Life</td> 
 
\t \t \t \t \t <td>D8T39AV-BATT 3C 50 WHr Long Life</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>POWER SUPPLY</td> 
 
\t \t \t \t \t <td>E5K50AV-ACADPT 65 Watt Smart nPFC</td> 
 
\t \t \t \t \t <td>E8G24AV-65W 19.5V/3.3A 2 Pin Reg R-Ang</td> 
 
\t \t \t \t \t <td>E5K50AV-ACADPT 65 Watt Smart nPFC</td> 
 
\t \t \t \t \t <td>E5K50AV-ACADPT 65 Watt Smart nPFC</td> 
 
\t \t \t \t \t <td>E5K50AV-ACADPT 65 Watt Smart nPFC</td> 
 
\t \t \t \t \t <td>E8G24AV-65W 19.5V/3.3A 2 Pin Reg R-Ang</td> 
 
\t \t \t \t \t <td>E5K50AV-ACADPT 65 Watt Smart nPFC</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>OTHERS</td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t L6V98AV: WLAN I 3160 ac 1x1 +BT 4.0 LE 
 
\t \t \t \t \t \t <br>L4Z21AV: WEBCAM Integrated 720p HD<br>L8W85AV#AC4: PWRCORD C5 1.8m BRZL<br>L6E48AV#AC4: KBD TP BRZL 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t L6V98AV: WLAN I 3160 ac 1x1 +BT 4.0 LE 
 
\t \t \t \t \t \t <br>L4Z21AV: WEBCAM Integrated 720p HD<br>L8W85AV#AC4: PWRCORD C5 1.8m BRZL<br>L6E48AV#AC4: KBD TP BRZL 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t L6V98AV: WLAN I 3160 ac 1x1 +BT 4.0 LE 
 
\t \t \t \t \t \t <br>L4Z21AV: WEBCAM Integrated 720p HD<br>L8W85AV#AC4: PWRCORD C5 1.8m BRZL<br>L6E48AV#AC4: KBD TP BRZL 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t L6V98AV: WLAN I 3160 ac 1x1 +BT 4.0 LE 
 
\t \t \t \t \t \t <br>L4Z21AV: WEBCAM Integrated 720p HD<br>L8W85AV#AC4: PWRCORD C5 1.8m BRZL<br>L6E48AV#AC4: KBD TP BRZL 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t L6V98AV: WLAN I 3160 ac 1x1 +BT 4.0 LE 
 
\t \t \t \t \t \t <br>L4Z21AV: WEBCAM Integrated 720p HD<br>L8W85AV#AC4: PWRCORD C5 1.8m BRZL<br>L6E48AV#AC4: KBD TP BRZL 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t L6V98AV: WLAN I 3160 ac 1x1 +BT 4.0 LE 
 
\t \t \t \t \t \t <br>L4Z21AV: WEBCAM Integrated 720p HD<br>L8W85AV#AC4: PWRCORD C5 1.8m BRZL<br>L6E48AV#AC4: KBD TP BRZL 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t L6V98AV: WLAN I 3160 ac 1x1 +BT 4.0 LE 
 
\t \t \t \t \t \t <br>L4Z21AV: WEBCAM Integrated 720p HD<br>L8W85AV#AC4: PWRCORD C5 1.8m BRZL<br>L6E48AV#AC4: KBD TP BRZL 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t </tbody> 
 
\t \t \t </table> 
 
<div class="arrow_postions"> 
 
\t <a href="#link"><i class="fa fa-arrow-left"></i></a> 
 
\t <br> 
 
\t <a href="#link"><i class="fa fa-arrow-right"></i></a> 
 
\t </div>

Answer 1

これはちょうどあなたが始めるためにされて、あなたはそれがあなたの正確なニーズのために働くようにする必要がありますが - あなたにこれを追加し$(document).ready()範囲

$('.arrow_postions a i').click(function(){ 
    if($(this).hasClass('fa-arrow-left')){ 
     $("#fixTable").animate({'margin-left':'-=200'},300) 
    }else{ 
     $("#fixTable").animate({'margin-left':'+=200'},300) 
    } 
})