Question

我创建了固定的左2列，我需要剩余的带滑块的列，即：当我单击左箭头移动左侧时，当我单击右箭头移动右侧。请找附件。

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

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

固定表左列滑块

1 个答案: