숨겨진 테이블 행이 표시되는 위치가 표시되지 않습니다.

Question

테이블의 각 행에 대해 숨겨진 행에 추가 정보를 표시합니다.

문제는 행 자체 아래에 표시되는 것이 아니라 표 위에 표시된다는 것입니다. 추가 정보를보기 위해 행 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> 

Answer 1

입니다.

@foreach($listings as $key => $value) 
<tr data-toggle="collapse" data-target="#{{ $value->id }}" class="accordion-toggle"> 
    <td> 
     <table> 
      <tr> 
       <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> 
      <tr> 
       <th colspan="14" class="hiddenRow"> 
        <div class="accordian-body collapse" id="{{ $value->id }}"> 
         <p>Lifestyle: {{ $value->lifestyle }}</p> 
        </div> 
       </th> 
      </tr> 
     </table> 
    </td> 
</tr> 
@endforeach 

Answer 2

숨겨진 행을 유지하기 위해 마지막 셀 안쪽에 행을 만들었습니다. 그러나 내부 행을 만들기 전에 셀을 닫았습니다. 코드가 혼란 스럽기 때문에이 경우인지 확실하지 않습니다.하지만 모양이 같습니다.

<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> 
       <tr> 
        <td colspan="14" class="hiddenRow"> 
         <div class="accordian-body collapse" id="{{ $value->id }}"> 
          <p>Lifestyle: {{ $value->lifestyle }}</p> 
         </div> 
        </td> 
       </tr> 
      </td> 
     </tr> 
     @endforeach 
    </tbody> 
</table>