javascript - 表格行滑动错误 - MVC 5

Question

我目前正在执行这里问题的答案:Can a table row expand and close?目前一切正常 100%!

但是，正如您在图片中看到的那样，行之间有一个小间隙，我希望它消失有两个原因。

1. 我只是希望没有间隙，我希望所有行都平滑地彼此重叠，直到展开。
2. 如果我点击那个微小的缝隙，它会向上闭合，然后正常的打开/关闭功能不再适用于它上面的行。

感谢任何帮助!

我在其中一个空隙处放了一个箭头

这是我对该页面的完整 View (仅供引用)，JS 脚本和额外内容 (<td colspan="12">) 都可以在页面底部找到。

@model IEnumerable<WebApplication2.ViewModels.Starring.StarringViewModel>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    table tr button {
        opacity: 0.5;
        float: right;
    }

    table tr:hover button {
        opacity: 1;
    }
</style>

<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
    <div class="panel-heading">
        <span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-star"></span>Starring</span></span>
    </div>

    <div class="row">
        <div class="col-xs-12">

            <button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Movie")';return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
            <button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Employee")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Employee</span></button>
            <button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Show")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Showing</span></button>

        </div>
    </div>

    <table class="table table-striped table-hover table-responsive table-condensed">
        <tr>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Movie Name</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Role)</span></h3>
            </th>
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieName)</span>
                </td>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieReleaseDate)</span>
                </td>
                <td class="col-lg-1">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.employeeName)</span>
                </td>
                <td class="col-lg-1">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Role)</span>
                </td>
                <td class="col-lg-3">
                    <button type="button" class="btn btn-warning col-lg-3" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>

                    <button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Details", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"></span>Details</button>

                    <button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
                </td>
            </tr>
            <tr>
                <td colspan="12">
                    <p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
                        MovieID: @Html.DisplayFor(modelItem => item.movieID)
                        <br />
                        Description: @Html.DisplayFor(modelItem => item.movieDescription)
                    </p>
                </td>
            </tr>
        }

    </table>
</div>
<script>

    $(function () {
        $("td[colspan=12]").find("p").hide();
        $("table").click(function (event) {
            event.stopPropagation();
            var $target = $(event.target);
            if ($target.closest("td").attr("colspan") == 12) {
                $target.slideUp();
            } else {
                $target.closest("tr").next().find("p").slideToggle();
            }
        });
    });

</script>

Answer 1

看起来您正在使用 Bootstrap。 Bootstrap 中的默认样式将 5px 填充应用于 .table-condensed 内的 td。您可以在 CSS 中使用以下规则覆盖它...

.table>tbody>tr>td {
    padding: 0px;
}

如果您只想在 p 折叠时删除填充，您可以更改规则以包含 nopadding 类...

.table>tbody>tr>td.nopadding {
    padding: 0px;
}

并在折叠 p 时使用 jQuery 将类附加到 td...

$(function () {
    $("td[colspan=12]").find("p").hide();
    $("td[colspan=12]").addClass("nopadding");

    $("tr").click(function () {
        var $target = $(this);
        var $detailsTd = $target.find("td[colspan=12]");
        if ($detailsTd.length) {
            $detailsTd.find("p").slideUp();
            $detailsTd.addClass("nopadding");
        } else {
            $detailsTd = $target.next().find("td[colspan=12]");
            $detailsTd.find("p").slideToggle();
            $detailsTd.toggleClass("nopadding");
        }
    });
});

JSFiddle