Question

这应该在我表中每行的隐藏行中显示其他信息。

问题是，它不是显示在行本身下面而是显示在表格之上。因此，如果我选择第3行来查看其附加信息，则隐藏行应显示在其下方，而是显示在所有行的顶部。

我猜我的桌面结构有问题，但我无法弄清楚是什么。

<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

您忘记关闭＆lt; tr＆gt;在开始新行之前标记。

@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>

隐藏的表行不显示它应该的位置

2 个答案: