.oouterHeight&.outerWidth呈指数增长,当设置表单元格高度&宽度
.outerHeight & .outerWidth grows exponentially, when setting table cell height & width
-
另一位web开发人员希望冻结最左边的列,并允许滚动该表。他找到了这段代码,并在客户的网站上实现了它。代码完成了它的工作,并按预期工作。
-
然而,他添加了一些@media查询,使表格的响应能力更强。这样做的时候把桌子弄砸了。它使左列与表的其余部分不对齐。
@media screen and (max-width: 699px) and (min-width: 520px) {
.exportTable th{
min-width: 170px !important;
}
.exportTable td{
min-width:170px !important;
max-width:170px !important;
}
}
所以我在window.resize((.中添加了函数调用
$(document).ready(function () {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
$(window).resize(function() {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
});
});
- 该代码是在调整窗口大小时调用的,但是outerHeight和outerWidth呈指数级增长,导致了一个严重的问题
当您设置高度时会出现问题:
$(this).css('height', current_row_height);
宽度/裕度:
$(this).css('position','absolute')
.css('margin-left','-'+table_collumns_margin[index]+'px')
.css('width',table_collumns_width[index])
这是一把小提琴。
只需抓住窗口并来回调整大小,表格单元格的高度/宽度就会呈指数级增长,从而导致严重问题。
这个fiddle演示了当您点击@media查询时,左列将如何错位。(当查看这个小提琴时,点击@media查询是很重要的。(
如何解决这些问题?
在我看来,向等式中添加javascript会使其过于复杂。我相信你想要的东西可以用CSS单独完成。
这是如何工作的,如果浏览器的最大宽度为500px,那么删除粘性列。如果没有,则显示粘性列。
除非你需要支持IE 9以上的浏览器,否则试试这个尺寸:
https://jsfiddle.net/BmLpV/284/
CSS:
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
@media (max-width: 500px) {
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
position: relative;
top: auto;
width: auto;
}
.zui-scroller {
margin-left: 0;
}
}
HTML:
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td>22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td>16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td>23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td>34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
</div>
编辑:要支持动态高度,您可以执行以下操作:
$(function(){
$('.zui-table tr').each(function(i, row) {
var height = $('.zui-sticky-col').eq(i).outerHeight() - $('.zui-sticky-col').eq(i).height();
$('.zui-sticky-col').eq(i).height($(row).height() - height);
});
})
为了获得更好的性能,您只能访问元素一次:
$(function(){
$('.zui-table tr').each(function(i, row) {
var el = $('.zui-sticky-col').eq(i);
var height = el.outerHeight() - el.height();
el.height($(row).height() - height);
});
})
https://jsfiddle.net/BmLpV/289/
相关文章:
- 模拟隐藏表单提交&使用JavaScript重定向以实现安全支付
- PHP&jQuery联系人表单错误
- Jquery&Ajax表单验证功能
- 如何不允许在使用PHP的自动完成表单中不在数据库中的值&JS
- Jquery、AJAX&PHP,表单提交不起作用
- 表单提交后用Javascript更新表-在IE&边
- 表单验证和提交时提交文本&输入按钮上带有验证的图像
- 上传表单数据&图像使用Angular JS和Cordova
- 使代码变短&表单验证
- Ionic&Angular JS表单验证在占位符中显示消息
- Ajax表单提交&Javascript确认错误
- JQuery表单提交在IE7&IE8
- JQuery表单验证&按钮波纹
- 无法验证表单是否已用CasperJS&jQuery
- HTML&JavaScript表单的多个选项的总价不变
- 使用jQuery&PHP没有表单
- 表单值在提交后作为cookie保存&页面更改
- 点击提交按钮禁用然后表单提交在firefox上工作,但不在chrome&狩猎
- PHP&JavaScript|在JavaScript生成的表单中包含PHP数学Captcha
- 引导验证程序&图像选取器-如果选择了两个可用的选择输入中的任何一个,如何验证表单