关于javascript：表格行滑动错误-MVC 5

Table Row Sliding Bug - MVC 5

我目前在这里实现问题的答案：表格行可以展开和关闭吗？并且目前所有内容都可以100％运行！

但是，正如您在图片中所看到的，行之间有一个很小的间隙，我希望这种情况消失有两个原因。

我只是希望没有间隙，我希望所有行都平滑地彼此叠放，直到扩展为止。

如果单击该微小间隙，它将向上关闭，然后正常的打开/关闭功能将不再对其上方的行起作用。

任何帮助表示赞赏！

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

enter )。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

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

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

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

<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>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Role)</span>
</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>

$(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();
}
});
});

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

1
2
3

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

如果只希望折叠p时删除填充，则可以更改规则以包括nopadding类...

1
2
3

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

并在折叠p ...

时使用jQuery将类附加到td

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(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