2015-11-05 71 views
3

我一直在研究含这样一个100多桌的Web应用程序更大: -表自动滚动时,其细胞比的车身宽度和高度

一些这些表的有走出我的网页的许多细胞并滚动整个页面并摧毁其设计,有些则不然。

我想使用jquery自动滚动这个表x和y只有当它的单元格大于我的页面宽度和高度。该卷轴仅适用于这种情况。我尝试使用css,但它使没有滚动问题的表看起来非常难看。

任何一个可以帮助请

<table class="DisplayTable table table-striped table-images table-bordered" id="FormTable"> 
<tbody><tr> 
    <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=FromPOP">From POP</a></th> 
    <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=ToPOP">To POP</a></th> 
    <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=TxType">Tx Type</a></th> 
    <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=Customer">Customer</a></th> 
    <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=FromPOP">Date Available</a></th> 
    <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=UserRequired">Required By</a></th> 
    <th nowrap="nowrap" class="DisplayTableHeaders"><a href="/noms/tx_flag_confirmed.php?ob=RequestNumber">Request Number</a></th> 
<tr onclick="Highlight(this, '', '#fff')"> 
    <td nowrap="nowrap" class="DisplayTableCells">RODA ... C-EG</td> 
    <td nowrap="nowrap" class="DisplayTableCells">MARAZIQ ... GZ-EG</td> 
    <td nowrap="nowrap" class="DisplayTableCells">GBEthernet</td> 
    <td nowrap="nowrap" class="DisplayTableCells">SDHProtect-MSAN-Payload-3-STM1</td> 
    <td nowrap="nowrap" class="DisplayTableCells">18-Feb-2015</td> 
    <td nowrap="nowrap" class="DisplayTableCells">ahmed.mabdelsatar</td> 
    <td nowrap="nowrap" class="DisplayTableCells">ORD-130745-Y1X9M6</td> 
    <td nowrap="nowrap" class="DisplayTableCells">5620073</td><td nowrap="nowrap" class="DisplayTableCells">No</td> 
    <td nowrap="nowrap" class="DisplayTableCells"> 
    <input type="text" onfocus="blur()" size="8" maxlength="11" name="DCD_35671" id="DCD_35671">&nbsp; 
    <a href="javascript:NewCal('DCD_35671','ddmmmyyyy')"> 
    <img width="16" height="16" border="0" alt="Pick a date" src="images/cal.gif"></a></td> 
    <td nowrap="nowrap" class="DisplayTableCells"> 
    <input type="hidden" value="35671" name="id"><input type="hidden" value="1421587294" name="DateRequired"> 
    <input type="submit" border="0" class="btn btn-primary" value="Confirm"></td> 
</tr> 
</table> 
+0

欢迎来到Stack Overflow。我已经修复了您的帖子的英文问题。我也格式化了你的html。你下次应该这样做。不只是在这里张贴,而是以正常使用方式发布。 我注意到html格式不正确。请仔细阅读并确保错字仅在帖子中。这不是你问题的原因。我指的是第10行与未完成

+0

是的我修复它非常感谢 –

回答

2

您可以使用jQuery的height()功能来确定元素的高度。

例如:

var tableHeight = $('table').height(); 
var bodyHeight = $('body').height(); 

然后,你需要制定出你的逻辑,使基于这些值滚动。

+0

somthing like this $(document).ready(function(){ var HeightDiv = $(“div”)。height(); var HeightTable = $(“table”)。height(); if(HeightTable> HeightDiv)var FontSizeTable = parseInt($(“table”)。css(“font-size”),10); while HeightTable> HeightDiv && FontSizeTable> 5){ FontSizeTable--; $( “表”)的CSS( “字体大小”,FontSizeTable); HeightTable = $( “表”)的高度();} } }); –