0
這應該在表格中的每一行的隱藏行中顯示附加信息。隱藏的表格行不顯示它應該在的位置
問題是，它不是在行本身下顯示，而是在表格上方顯示。 因此，如果我選擇第3行以查看其附加信息，隱藏行應顯示在其下方，而是顯示在所有行的頂部。
我猜我的表格結構有問題，但是我找不出什麼。
而這裏的JSFiddle
<link rel="stylesheet" type="text/css" href="http://drvic10k.github.io/bootstrap-sortable/Contents/bootstrap-sortable.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://drvic10k.github.io/bootstrap-sortable/Scripts/bootstrap-sortable.js"></script>
<script src="http://drvic10k.github.io/bootstrap-sortable/Scripts/moment.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<div class="box">
<div class="box-header">
<h3 class="box-title">View Listings</h3>
<div class="box-tools">
<div class="input-group">
<input type="text" name="table_search" class="form-control input-sm pull-right" style="width: 150px;" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-sm btn-default"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div><!-- /.box-header -->
<div class="box-body table-responsive no-padding">
<table class="table table-hover table-striped sortable" style="border-collapse:collapse;">
<thead>
<tr>
<th data-defaultsort="asc" data-sortcolumn="0" data-sortkey="0-1">ID</th>
<th data-defaultsign="month" data-sortcolumn="1" data-sortkey="1-1">Status</th>
<th data-sortcolumn="2" data-sortkey="2-1">For</th>
<th data-sortcolumn="3" data-sortkey="3-1">Availability</th>
<th data-mainsort="true" data-sortcolumn="4" data-sortkey="4-1">Type<span class="sign arrow"></span></th>
<th data-sortcolumn="5" data-sortkey="5-1">Contact</th>
<th data-sortcolumn="6" data-sortkey="6-1">Reference ID</th>
<th data-sortcolumn="7" data-sortkey="7-1">Location</th>
<th data-sortcolumn="8" data-sortkey="8-1">Category</th>
<th data-sortcolumn="9" data-sortkey="9-1">Apartment Area</th>
<th data-sortcolumn="10" data-sortkey="10-1">Garden Area</th>
<th data-sortcolumn="11" data-sortkey="11-1">Parking</th>
<th data-sortcolumn="12" data-sortkey="12-1">Visitors Parking</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($listings as $key => $value)
<tr data-toggle="collapse" data-target="#{{ $value->id }}" class="accordion-toggle">
<td data-value="{{ $value->id }}">{{ $value->id }}</td>
<td data-value="{{ $value->status }}">{{ $value->status }}</td>
<td data-value="{{ $value->listingfor }}">{{ $value->listingfor }}</td>
<td data-value="{{ $value->propertystatus }}">{{ $value->propertystatus }}</td>
<td data-value="{{ $value->propertytype }}">{{ $value->propertytype }}</td>
<td data-value="{{ $value->contact_id }}">{{ $value->contact_id }}</td>
<td data-value="{{ $value->reference_id }}">{{ $value->reference_id }}</td>
<td data-value="{{ $value->location }}">{{ $value->location }}</td>
<td data-value="{{ $value->category }}">{{ $value->category }}</td>
<td data-value="{{ $value->apartment_area }}">{{ $value->apartment_area }}</td>
<td data-value="{{ $value->garden_area }}">{{ $value->garden_area }}</td>
<td data-value="{{ $value->parking }}">{{ $value->parking }}</td>
<td data-value="{{ $value->visitors_parking }}">{{ $value->visitors_parking }}</td>
<td><a class="btn btn-small btn-success" href="{{ URL::to('listings/view/' . $value->id) }}">Show</a> <a class="btn btn-small btn-info" href="{{ URL::to('listings/view/' . $value->id . '/edit') }}">Edit</a> <a class="btn btn-small btn-danger" href="{{ URL::to('listings/view/' . $value->id . '/delete') }}">Delete</a></td>
<tr>
<td colspan="14" class="hiddenRow">
<div class="accordian-body collapse" id="{{ $value->id }}">
<p>Lifestyle: {{ $value->lifestyle }}</p>
</div>
</td>
</tr>
</tr>
@endforeach
</tbody>
</table>
</div><!-- /.box-body -->
</div>
我試着清理一下你的縮進。這可以讓你更容易地看到你放入了一個額外的結尾''標籤，與@baeda所說的幾乎相反。 – trysis
您在頂部使用4個空格/製表符縮進，但之後切換到2。我不知道該走哪條路，但我試着用2.如果你不喜歡它，我可以改爲4. – trysis
對不起，我的意思是@baeda說的。然而，他把桌子放在排內，這使得這一切都令人困惑，並且Inception-y。 – trysis