表行滑动错误 - MVC 5 [英] Table Row Sliding Bug - MVC 5
本文介绍了表行滑动错误 - MVC 5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在实施问题的答案在这里：可以在表行扩大和密切的？的一切目前是100％！
然而，正如你可以在图片中看到有行之间小的差距，我想这走了两方面的原因。
- 我根本就没有preFER是没有差距，我要对行所有对彼此顶部铺设顺利，直到扩大。
- 如果我点击这个微小的差距将关闭向上，然后常开/关功能不再适用于该行上面。
任何帮助AP preciated！
的我把箭头的缺陷之一的
下面是我整个的查看的该页面（仅供参考），无论是JS脚本和额外的内容（＆LT; TD合并单元格=12＆GT; ），可以在页面的底部找到。
@model IEnumerable的＆LT; WebApplication2.ViewModels.Starring.StarringViewModel＆GT;@ {
ViewBag.Title =指数;
布局=〜/查看/共享/ _Layout.cshtml
}＆LT;风格类型=文/ CSS＆GT;
表TR按钮{
不透明度：0.5;
浮动：权利;
} 表TR：悬停按钮{
不透明度：1;
}
＆LT; /风格＆GT;＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT; DIV CLASS =面板面板主的风格=宽度：100％＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT;跨度风格=FONT-SIZE：30PX;字体样式：斜＆GT;＆LT;跨度风格=FONT-SIZE：大;＆GT;＆LT;跨度风格=保证金右：5像素级= glyphicon glyphicon星＆GT;＆LT; / SPAN＆GT;＆主演LT; / SPAN＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-XS-12＆GT; ＆LT;按钮式=button风格=保证金：的3px;宽度：32.8％级=BTN BTN-成功COL-LG-3 COL-XS-3的onclick =location.href ='@ Url.Action （创建，电影）';返回false;＆GT;＆LT;跨度风格=FONT-SIZE：大;＆GT;＆LT;跨度风格=保证金右：5像素级=glyphicon glyphicon-加上＆GT;＆LT; / SPAN＆gt;添加新的电影和LT; / SPAN＆GT;＆LT; /按钮＆GT;
＆LT;按钮式=button风格=保证金：的3px;宽度：32.8％级=BTN BTN-成功COL-LG-3 COL-XS-3的onclick =location.href ='@ Url.Action （创建，员工）';返回false;＆GT;＆LT;跨度风格=FONT-SIZE：大;＆GT;＆LT;跨度风格=保证金右：5像素级=glyphicon glyphicon-加上＆GT;＆LT; / SPAN＆gt;添加新员工＆LT; / SPAN＆GT;＆LT; /按钮＆GT;
＆LT;按钮式=button风格=保证金：的3px;宽度：32.8％级=BTN BTN-成功COL-LG-3 COL-XS-3的onclick =location.href ='@ Url.Action （创建，展）';返回false;＆GT;＆LT;跨度风格=FONT-SIZE：大;＆GT;＆LT;跨度风格=保证金右：5像素级=glyphicon glyphicon-加上＆GT;＆LT; / SPAN＆gt;添加新的显示＆LT; / SPAN＆GT;＆LT; /按钮＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;表类=table表条纹表悬停表响应表浓缩＆GT;
＆所述; TR＆GT;
＆LT;第i个
＆LT; H3风格=FONT-SIZE：X大＆GT;＆LT;跨度风格=字体重量：大胆＆GT;电影名称＆LT; / SPAN＆GT;＆LT; / H3＆GT;
＆LT; /第i
＆LT;第i个
＆LT; H3风格=FONT-SIZE：X大＆GT;＆LT;跨度风格=字体重量：大胆＆GT;发布日期和LT; / SPAN＆GT;＆LT; / H3＆GT;
＆LT; /第i
＆LT;第i个
＆LT; H3风格=FONT-SIZE：X大＆GT;＆LT;跨度风格=字体重量：大胆＆GT;演员＆LT; / SPAN＆GT;＆LT; / H3＆GT;
＆LT; /第i
＆LT;第i个
＆LT; H3风格=FONT-SIZE：X大＆GT;＆LT;跨度风格=字体重量：大胆＆GT; @ Html.DisplayNameFor（型号=＆GT; model.Role）LT; / SPAN＆GT;＆LT; / H3 GT＆;
＆LT; /第i
百分位＆GT;＆LT; /第i
＆LT; / TR＆GT;
@foreach（以型号VAR项）
{
＆所述; TR＆GT;
＆LT; TD类=COL-LG-2＆GT;
＆LT;跨度风格=FONT-SIZE：知识+;＆GT; @ Html.DisplayFor（modelItem =＆GT; item.movieName）LT; / SPAN＆GT;
＆LT; / TD＆GT;
＆LT; TD类=COL-LG-2＆GT;
＆LT;跨度风格=FONT-SIZE：知识+;＆GT; @ Html.DisplayFor（modelItem =＆GT; item.movieReleaseDate）LT; / SPAN＆GT;
＆LT; / TD＆GT;
＆LT; TD类=COL-LG-1＆GT;
＆LT;跨度风格=FONT-SIZE：知识+;＆GT; @ Html.DisplayFor（modelItem =＆GT; item.employeeName）LT; / SPAN＆GT;
＆LT; / TD＆GT;
＆LT; TD类=COL-LG-1＆GT;
＆LT;跨度风格=FONT-SIZE：知识+;＆GT; @ Html.DisplayFor（modelItem =＆GT; item.Role）LT; / SPAN＆GT;
＆LT; / TD＆GT;
＆LT; TD类=COL-LG-3＆GT;
＆LT;按钮式=按钮级=BTN BTN-警告COL-LG-3的onclick =location.href ='@ Url.Action（编辑，电影，新{ID = item.movieID} ）';返回false;＆GT;＆LT;跨度风格=保证金右：5像素级=glyphicon glyphicon铅笔＆GT;＆LT; / SPAN＆gt;编辑＆LT; /按钮＆GT; ＆LT;按钮式=按钮级=BTN BTN-信息COL-LG-3 COL-LG-偏移-1的onclick =location.href ='@ Url.Action（详细资料，电影，新{ID = item.movieID}）;返回false;＆GT;＆LT;跨度风格=保证金右：5像素级=glyphicon glyphicon对齐对齐＆GT;＆LT; / SPAN＆GT;详情＆LT; /按钮＆GT; ＆LT;按钮式=按钮级=BTN BTN-危险COL-LG-3 COL-LG-偏移-1的onclick =@ Url.Action location.href ='（删除，电影，新{ID = item.movieID}）;返回false;＆GT;＆LT;跨度风格=保证金右：5像素级=glyphicon glyphicon-垃圾＆GT;＆LT; / SPAN＆GT;删除＆LT; /按钮＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD列跨度=12＆GT;
＆LT; p =风格字体大小：知识+;字体样式：斜体; FONT-FAMILY：'的Roboto，无衬线＆GT;
MovieID：@ Html.DisplayFor（modelItem =＆GT; item.movieID）
＆LT; BR /＆GT;
说明：@ Html.DisplayFor（modelItem =＆GT; item.movieDescription）
＆所述; / P＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
} ＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT;脚本＆GT; $（函数（）{
$（TD [colspan值= 12]）找到（P），隐藏（）。
$（表）。点击（函数（事件）{
event.stopPropagation（）;
变量$目标= $（event.target）;
如果（$ target.closest（TD）。ATTR（合并单元格）== 12）{
$ target.slideUp（）;
}其他{
$ target.closest（TR）下一个（）找到（P）的slideToggle（）。;
}
}）;
}）;＆LT; / SCRIPT＆GT;
解决方案
它看起来像你使用引导。在引导的默认样式应用于一个5像素填充，以 D 的内线。表冷凝。你可以在你的CSS与以下规则重写这个...
。表＆GT;＆TBODY GT; TR＆GT; TD {
填充：0像素;
}
如果您只想取出填充当 P 被折叠，则可以更改规则以包括 nopadding 类...
。表＆GT;＆TBODY GT; TR＆GT; td.nopadding {
填充：0像素;
}
和使用jQuery类附加到 D 当折叠 P ...
$（函数（）{
$（TD [colspan值= 12]）找到（P），隐藏（）。
$（TD [colspan值= 12]）addClass（nopadding）; $（TR）。点击（函数（）{
变量$目标= $（本）;
变量$ detailsTd = $ target.find（TD [colspan值= 12]）;
如果（$ detailsTd.length）{
$ detailsTd.find（P）效果基本show（）;
$ detailsTd.addClass（nopadding）;
}其他{
。$ detailsTd = $ target.next（）找到（TD [colspan值= 12]）;
$ detailsTd.find（P）的slideToggle（）;
$ detailsTd.toggleClass（nopadding）;
}
}）;
}）;
I am currently implementing the answer to the question here:Can a table row expand and close? and everything currently works 100%!
However, as you can see in the picture there is a small gap between the rows, I want this gone for two reasons.
- I simply would prefer there to be no gaps, I want the rows to all smoothly lay on top of each other until expanded.
- If I click on that tiny gap it will close upwards, and then the normal open/close function no longer works for the row above it.
Any help appreciated!
I put an arrow by one of the gaps
Here is my entire View for that page (just for reference), BOTH the JS Script and the extra content (<td colspan="12">) can be found at the bottom of the page.
@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>
解决方案
It looks like you're using Bootstrap. The default styles in Bootstrap applies a 5px padding to tds inside .table-condensed. You can override this with the following rule in your CSS...
.table>tbody>tr>td {
padding: 0px;
}
If you only want the padding removed when the p is collapsed, you can change the rule to include a nopadding class...
.table>tbody>tr>td.nopadding {
padding: 0px;
}
And use jQuery to attach the class to the td when you collapse the p...
$(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");
}
});
});
这篇关于表行滑动错误 - MVC 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
