gpt4 book ai didi

javascript - jQuery 同位素表问题,Firefox 除外

转载 作者:行者123 更新时间:2023-11-28 03:53:49 26 4
gpt4 key购买 nike

我正在使用 jQuery 插件 Isotope用于排序和过滤。排序和过滤后的数据存储在 <tr> 中。 .表格呈现完美,功能在 Firefox 中运行良好。但表格布局在 Firefox 以外的浏览器中崩溃。我无法弄清楚出了什么问题。请帮忙!

$(document).ready(function() {

$(window).load(function() {

var $container = $('.busResultsContainer').isotope({
itemSelector: '.busResults',
layoutMode: 'masonry',
getSortData: {
earliest: '[data-earliest] parseInt',
late: '[data-earliest] parseInt',
fastest: '[data-timeTaken] parseInt'
},
sortAscending: {
earliest: true,
late: false,
fastest: true
}
});

// Sorting Feature
$(".sortByBtn").on("click", function() {
sortByVal = $(this).data("sort-by");
console.log(sortByVal);
$container.isotope({
sortBy: sortByVal
});

});

});

});
.hidden {
display: none;
}

.busResultsHeading tr th:nth-child(1),
.busResults td:nth-child(1),
.busResultsHeading tr th:nth-child(2),
.busResults td:nth-child(2),
.busResultsHeading tr th:nth-child(3),
.busResults td:nth-child(3) {
width: 15%;
}

.busResultsHeading tr th:nth-child(4),
.busResults td:nth-child(4),
.busResultsHeading tr th:nth-child(5),
.busResults td:nth-child(5),
.busResultsHeading tr th:nth-child(6),
.busResults td:nth-child(6),
.busResultsHeading tr th:nth-child(9),
.busResults td:nth-child(9) {
width: 10%;
}

.busResultsHeading tr th:nth-child(7),
.busResults td:nth-child(7),
.busResultsHeading tr th:nth-child(8),
.busResults td:nth-child(8) {
width: 7.5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<div>
<button class="btn btn-default btn-primary sortByBtn" data-sort-by="earliest">Earliest</button>
<button class="btn btn-default btn-info sortByBtn" data-sort-by="late">Latest</button>
<button class="btn btn-default btn-success sortByBtn" data-sort-by="fastest">Fastest</button>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered" style="table-layout: fixed; width: 100%;">
<thead class="busResultsHeading">
<tr>
<th>Operators</th>
<th>Bus Types</th>
<th>Timing</th>
<th>Duration</th>
<th>Distance</th>
<th>Bus Number</th>
<th>Seats</th>
<th>Fare</th>
<th>Schedule</th>
</tr>
</thead>
<tbody class="busResultsContainer">
<tr class="PublicTravels FastPassenger seatyes busResults col-md-12 padding00" data-earliest="1493001000" data-timetaken="180000">
<td>
Public Travels<br> Public Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Fast Passenger
</td>
<td>
<b class="bookingfc">8:00 AM - 8:50 AM</b>
</td>
<td>
0h 50m
</td>
<td>
70 Km(s)
</td>
<td>PB 93 234</td>
<td>9</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>40</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Public Bus</th>
<th colspan="2">Bus Type: Fast Passenger</th>
</tr>
<tr>
<th>Operator: Public Travels</th>
<th colspan="2">Bus Number: PB 93 234</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>07:00</td>
<td>Statue</td>
<td>2</td>
</tr>
<tr>
<td>07:15</td>
<td>Vellayambalam</td>
<td>5</td>
</tr>
<tr>
<td>07:40</td>
<td>Kesavadasapuram</td>
<td>7</td>
</tr>
<tr>
<td>08:00</td>
<td>Attingal</td>
<td>10</td>
</tr>
<tr>
<td>08:10</td>
<td>Paravoor</td>
<td>15</td>
</tr>
<tr>
<td>08:30</td>
<td>Karunagapally</td>
<td>20</td>
</tr>
<tr>
<td>08:50</td>
<td>Chertala</td>
<td>80</td>
</tr>
<tr>
<td>08:50</td>
<td>Harippad</td>
<td>100</td>
</tr>
<tr>
<td>08:55</td>
<td>Ernakulam</td>
<td>140</td>
</tr>
<tr>
<td>09:00</td>
<td>Aroor</td>
<td>160</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="PublicTravels FastPassenger seatyes busResults col-md-12 padding00" data-earliest="1493029800" data-timetaken="306000">
<td>
Public Travels<br> Public Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Fast Passenger
</td>
<td>
<b class="bookingfc">4:00 PM - 5:25 PM</b>
</td>
<td>
1h 25m
</td>
<td>
70 Km(s)
</td>
<td>PB 889</td>
<td>7</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>40</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Public Bus</th>
<th colspan="2">Bus Type: Fast Passenger</th>
</tr>
<tr>
<th>Operator: Public Travels</th>
<th colspan="2">Bus Number: PB 889</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>15:00</td>
<td>Statue</td>
<td>2</td>
</tr>
<tr>
<td>15:20</td>
<td>Vellayambalam</td>
<td>5</td>
</tr>
<tr>
<td>15:40</td>
<td>Kesavadasapuram</td>
<td>7</td>
</tr>
<tr>
<td>16:00</td>
<td>Attingal</td>
<td>10</td>
</tr>
<tr>
<td>16:15</td>
<td>Paravoor</td>
<td>15</td>
</tr>
<tr>
<td>17:10</td>
<td>Karunagapally</td>
<td>20</td>
</tr>
<tr>
<td>17:25</td>
<td>Chertala</td>
<td>80</td>
</tr>
<tr>
<td>17:35</td>
<td>Harippad</td>
<td>100</td>
</tr>
<tr>
<td>17:50</td>
<td>Ernakulam</td>
<td>140</td>
</tr>
<tr>
<td>18:00</td>
<td>Aroor</td>
<td>160</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="KedaramTravels LocalBus seatNo busResults col-md-12 padding00" data-earliest="1492984800" data-timetaken="252000">
<td>
Kedaram Travels<br> Kedaram Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Local Bus
</td>
<td>
<b class="bookingfc">3:30 AM - 4:40 AM</b>
</td>
<td>
1h 10m
</td>
<td>
25 Km(s)
</td>
<td>KD 678</td>
<td>0</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>15</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Kedaram Bus</th>
<th colspan="2">Bus Type: Local Bus</th>
</tr>
<tr>
<th>Operator: Kedaram Travels</th>
<th colspan="2">Bus Number: KD 678</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>02:05</td>
<td>Statue</td>
<td>10</td>
</tr>
<tr>
<td>02:15</td>
<td>Pattom</td>
<td>15</td>
</tr>
<tr>
<td>02:30</td>
<td>Kesavadasapuram</td>
<td>20</td>
</tr>
<tr>
<td>03:00</td>
<td>Kaniyapuram</td>
<td>30</td>
</tr>
<tr>
<td>03:30</td>
<td>Attingal</td>
<td>35</td>
</tr>
<tr>
<td>04:25</td>
<td>Paravoor</td>
<td>40</td>
</tr>
<tr>
<td>04:35</td>
<td>Kollam</td>
<td>50</td>
</tr>
<tr>
<td>04:40</td>
<td>Chertala</td>
<td>60</td>
</tr>
<tr>
<td>04:50</td>
<td>Alapuzha</td>
<td>100</td>
</tr>
<tr>
<td>05:00</td>
<td>Ernakulam</td>
<td>150</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="KedaramTravels LocalBus seatNo busResults col-md-12 padding00" data-earliest="1492998300" data-timetaken="126000">
<td>
Kedaram Travels<br> Kedaram Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Local Bus
</td>
<td>
<b class="bookingfc">7:15 AM - 7:50 AM</b>
</td>
<td>
0h 35m
</td>
<td>
25 Km(s)
</td>
<td>KD 678</td>
<td>0</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>15</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Kedaram Bus</th>
<th colspan="2">Bus Type: Local Bus</th>
</tr>
<tr>
<th>Operator: Kedaram Travels</th>
<th colspan="2">Bus Number: KD 678</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>06:00</td>
<td>Statue</td>
<td>10</td>
</tr>
<tr>
<td>06:10</td>
<td>Pattom</td>
<td>15</td>
</tr>
<tr>
<td>06:20</td>
<td>Kesavadasapuram</td>
<td>20</td>
</tr>
<tr>
<td>06:40</td>
<td>Kaniyapuram</td>
<td>30</td>
</tr>
<tr>
<td>07:15</td>
<td>Attingal</td>
<td>35</td>
</tr>
<tr>
<td>07:30</td>
<td>Paravoor</td>
<td>40</td>
</tr>
<tr>
<td>07:50</td>
<td>Kollam</td>
<td>50</td>
</tr>
<tr>
<td>07:50</td>
<td>Chertala</td>
<td>60</td>
</tr>
<tr>
<td>07:55</td>
<td>Alapuzha</td>
<td>100</td>
</tr>
<tr>
<td>08:00</td>
<td>Ernakulam</td>
<td>150</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

代码笔:http://codepen.io/linktoahref/full/JNKgJZ/

最佳答案

使用此代码解决您的问题使用 tr position fixed

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hidden {
display: none;
}

.busResultsHeading tr th:nth-child(1),
.busResults td:nth-child(1),
.busResultsHeading tr th:nth-child(2),
.busResults td:nth-child(2),
.busResultsHeading tr th:nth-child(3),
.busResults td:nth-child(3) {
width: 15%;
}

.busResultsHeading tr th:nth-child(4),
.busResults td:nth-child(4),
.busResultsHeading tr th:nth-child(5),
.busResults td:nth-child(5),
.busResultsHeading tr th:nth-child(6),
.busResults td:nth-child(6),
.busResultsHeading tr th:nth-child(9),
.busResults td:nth-child(9) {
width: 10%;
}

.busResultsHeading tr th:nth-child(7),
.busResults td:nth-child(7),
.busResultsHeading tr th:nth-child(8),
.busResults td:nth-child(8) {
width: 7.5%;
}
.busResultsContainer{position: fixed!important; width: 100%;}
</style>

<body>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
$(document).ready(function() {

$(window).load(function() {

var $container = $('.busResultsContainer').isotope({
itemSelector: '.busResults',
layoutMode: 'masonry',
getSortData: {
earliest: '[data-earliest] parseInt',
late: '[data-earliest] parseInt',
fastest: '[data-timeTaken] parseInt'
},
sortAscending: {
earliest: true,
late: false,
fastest: true
}
});

// Sorting Feature
$(".sortByBtn").on("click", function() {
sortByVal = $(this).data("sort-by");
console.log(sortByVal);
$container.isotope({
sortBy: sortByVal
});

});

});

});
</script>
<div style="display:block; width:100%;float:left;position: relative;">
<button class="btn btn-default btn-primary sortByBtn" data-sort-by="earliest">Earliest</button>
<button class="btn btn-default btn-info sortByBtn" data-sort-by="late">Latest</button>
<button class="btn btn-default btn-success sortByBtn" data-sort-by="fastest">Fastest</button>
</div>
<div style="display:block; width:100%;float:left;position: relative;">
<div class="table table-responsive">
<table class="table table-striped table-hover table-bordered" style="table-layout: fixed; width: 100%;">
<thead class="busResultsHeading">
<tr>
<th>Operators</th>
<th>Bus Types</th>
<th>Timing</th>
<th>Duration</th>
<th>Distance</th>
<th>Bus Number</th>
<th>Seats</th>
<th>Fare</th>
<th>Schedule</th>
</tr>
</thead>
<tbody class="busResultsContainer" style="
position: fixed!important;">
<tr class="PublicTravels seatyes busResults col-md-12 padding00" data-earliest="1493001000" data-timetaken="180000">
<td>
Public Travels<br> Public Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Fast Passenger
</td>
<td>
<b class="bookingfc">8:00 AM - 8:50 AM</b>
</td>
<td>
0h 50m
</td>
<td>
70 Km(s)
</td>
<td>PB 93 234</td>
<td>9</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>40</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Public Bus</th>
<th colspan="2">Bus Type: Fast Passenger</th>
</tr>
<tr>
<th>Operator: Public Travels</th>
<th colspan="2">Bus Number: PB 93 234</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>07:00</td>
<td>Statue</td>
<td>2</td>
</tr>
<tr>
<td>07:15</td>
<td>Vellayambalam</td>
<td>5</td>
</tr>
<tr>
<td>07:40</td>
<td>Kesavadasapuram</td>
<td>7</td>
</tr>
<tr>
<td>08:00</td>
<td>Attingal</td>
<td>10</td>
</tr>
<tr>
<td>08:10</td>
<td>Paravoor</td>
<td>15</td>
</tr>
<tr>
<td>08:30</td>
<td>Karunagapally</td>
<td>20</td>
</tr>
<tr>
<td>08:50</td>
<td>Chertala</td>
<td>80</td>
</tr>
<tr>
<td>08:50</td>
<td>Harippad</td>
<td>100</td>
</tr>
<tr>
<td>08:55</td>
<td>Ernakulam</td>
<td>140</td>
</tr>
<tr>
<td>09:00</td>
<td>Aroor</td>
<td>160</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class=" KedaramTravels LocalBus seatNo busResults col-md-12 padding00" data-earliest="1493029800" data-timetaken="306000">
<td>
Public Travels<br> Public Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Fast Passenger
</td>
<td>
<b class="bookingfc">4:00 PM - 5:25 PM</b>
</td>
<td>
1h 25m
</td>
<td>
70 Km(s)
</td>
<td>PB 889</td>
<td>7</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>40</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Public Bus</th>
<th colspan="2">Bus Type: Fast Passenger</th>
</tr>
<tr>
<th>Operator: Public Travels</th>
<th colspan="2">Bus Number: PB 889</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>15:00</td>
<td>Statue</td>
<td>2</td>
</tr>
<tr>
<td>15:20</td>
<td>Vellayambalam</td>
<td>5</td>
</tr>
<tr>
<td>15:40</td>
<td>Kesavadasapuram</td>
<td>7</td>
</tr>
<tr>
<td>16:00</td>
<td>Attingal</td>
<td>10</td>
</tr>
<tr>
<td>16:15</td>
<td>Paravoor</td>
<td>15</td>
</tr>
<tr>
<td>17:10</td>
<td>Karunagapally</td>
<td>20</td>
</tr>
<tr>
<td>17:25</td>
<td>Chertala</td>
<td>80</td>
</tr>
<tr>
<td>17:35</td>
<td>Harippad</td>
<td>100</td>
</tr>
<tr>
<td>17:50</td>
<td>Ernakulam</td>
<td>140</td>
</tr>
<tr>
<td>18:00</td>
<td>Aroor</td>
<td>160</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="KedaramTravels LocalBus seatNo busResults col-md-12 padding00" data-earliest="1492984800" data-timetaken="252000">
<td>
Kedaram Travels<br> Kedaram Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Local Bus
</td>
<td>
<b class="bookingfc">3:30 AM - 4:40 AM</b>
</td>
<td>
1h 10m
</td>
<td>
25 Km(s)
</td>
<td>KD 678</td>
<td>0</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>15</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Kedaram Bus</th>
<th colspan="2">Bus Type: Local Bus</th>
</tr>
<tr>
<th>Operator: Kedaram Travels</th>
<th colspan="2">Bus Number: KD 678</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>02:05</td>
<td>Statue</td>
<td>10</td>
</tr>
<tr>
<td>02:15</td>
<td>Pattom</td>
<td>15</td>
</tr>
<tr>
<td>02:30</td>
<td>Kesavadasapuram</td>
<td>20</td>
</tr>
<tr>
<td>03:00</td>
<td>Kaniyapuram</td>
<td>30</td>
</tr>
<tr>
<td>03:30</td>
<td>Attingal</td>
<td>35</td>
</tr>
<tr>
<td>04:25</td>
<td>Paravoor</td>
<td>40</td>
</tr>
<tr>
<td>04:35</td>
<td>Kollam</td>
<td>50</td>
</tr>
<tr>
<td>04:40</td>
<td>Chertala</td>
<td>60</td>
</tr>
<tr>
<td>04:50</td>
<td>Alapuzha</td>
<td>100</td>
</tr>
<tr>
<td>05:00</td>
<td>Ernakulam</td>
<td>150</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="KedaramTravels LocalBus seatNo busResults col-md-12 padding00" data-earliest="1492998300" data-timetaken="126000">
<td>
Kedaram Travels<br> Kedaram Bus<br>
<small class="bookinghr">Statue - Ernakulam</small>
</td>
<td>
Local Bus
</td>
<td>
<b class="bookingfc">7:15 AM - 7:50 AM</b>
</td>
<td>
0h 35m
</td>
<td>
25 Km(s)
</td>
<td>KD 678</td>
<td>0</td>
<td>
<span><i class="fa fa-inr" aria-hidden="true"></i></span>
<b>15</b>
<br>
</td>
<td>
<a href="#" class="view_schedule">View Schedule</a>
<div class="hidden">
<div class="col-md-offset-2 col-md-8 mtop20 mbottom text-box table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Bus Name: Kedaram Bus</th>
<th colspan="2">Bus Type: Local Bus</th>
</tr>
<tr>
<th>Operator: Kedaram Travels</th>
<th colspan="2">Bus Number: KD 678</th>
</tr>
</thead>
<tbody>
<tr>
<th>Time</th>
<th>Place</th>
<th>Distance</th>
</tr>
<tr>
<td>06:00</td>
<td>Statue</td>
<td>10</td>
</tr>
<tr>
<td>06:10</td>
<td>Pattom</td>
<td>15</td>
</tr>
<tr>
<td>06:20</td>
<td>Kesavadasapuram</td>
<td>20</td>
</tr>
<tr>
<td>06:40</td>
<td>Kaniyapuram</td>
<td>30</td>
</tr>
<tr>
<td>07:15</td>
<td>Attingal</td>
<td>35</td>
</tr>
<tr>
<td>07:30</td>
<td>Paravoor</td>
<td>40</td>
</tr>
<tr>
<td>07:50</td>
<td>Kollam</td>
<td>50</td>
</tr>
<tr>
<td>07:50</td>
<td>Chertala</td>
<td>60</td>
</tr>
<tr>
<td>07:55</td>
<td>Alapuzha</td>
<td>100</td>
</tr>
<tr>
<td>08:00</td>
<td>Ernakulam</td>
<td>150</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div></div>
</body>

</html>

关于javascript - jQuery 同位素表问题,Firefox 除外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43586302/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com