Question

我有一个简单的Jquery代码来调用一堆AJAX ping方法来查明系统模块是否已启动。这是在每个AJAX调用结果上逐行生成一个表。表格看起来很简单。

现在我的问题是可调用方法的数量正在增长，并且可能会导致很多滚动，所以我想我设置了：

body {
  max-height: 500px;
}

但桌子不会破坏，我最后仍然滚动很多。有什么想法来解决这个问题吗？

我用随机的OK / ERROR替换了方法调用，所以you can run it in JSFiddle here.

// instead of AJAX call result just append random result
for (i = 0; i < 50; i++) {
    $( "#resultTable" ).append( '<tr><td> TestWS </td>' +   
      (Math.random()<.5  ?
          '<td class="ok"> OK </td></tr>' :
          '<td class="error"> ERROR </td></tr>'
       )
  );
}

这个虚拟的JQuery代码并不重要，只是一个显示问题的例子，我要找的是如果这个表太长就会使这个表中断。

欢迎任何建议。谢谢！

Answer 1

最简单的方法是使用可滚动的垂直表。所以，你将有一个滚动条，你可以滚动表格数据。

创建可滚动的垂直表。您需要设置显示和溢出属性。

table {
  display: block;
  height: 200px;
  overflow-y: scroll;
}

为方便起见，我修改了您的Fiddle，以便您查看。

Answer 2

到目前为止，最好的选择之一似乎是：

将表格放入容器并设置：

#container {
    column-count:3;
    -moz-column-count:3;
    -webkit-column-count:3;
}

因此它显示了多列中的表，而不需要太多（或没有）滚动。

Fiddle

任何退回或主要的浏览器兼容性问题？

Answer 3

这是另一种方法。可能flexbox是一个更好的解决方案，但是fwiw：

＆＃13;

// instead of AJAX call result just append random result
var pageHeight = 200, cnt=1, oldcnt=0;
var endStr = '';
for (i = 0; i < 50; i++) {
	$( "#div"+cnt ).find('table.resultTable').append( '\
	<tr><td> TestWS </td>' +	
      (Math.random()<.5  ?
          '<td class="ok"> OK </td></tr>' :
          '<td class="error"> ERROR </td></tr>'
       )
	);
	if ( $( "#div"+cnt ).find('table.resultTable').height() > pageHeight){
	   oldcnt = cnt;
		cnt++;
		$( "#container").append('<div id="div'+cnt+'"><table class="resultTable"><tr><th>Service</th><th>Result</th></tr></table>');
	}
  
}

＆＃13;

body {width:100%;max-height: 200px;}
th, td{padding:2px;border:1px solid;xwidth:50px;}
.resultTable th{background-color:#CCCCCC;font-weight:bold;}
.resultTable td.ok{background-color:#E1FFD8;font-weight:bold;}
.resultTable td.error{background-color:#FFB5B5;font-weight:bold;}
#container{width:100%;overflow:auto;border:1px solid orange;}
[id^=div]{max-width:120px;width:120px;float:left;margin-right:7px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="container">
	<div id="div1">
		<table class='resultTable'>
		  <tr><th>Service</th><th>Result</th></tr>
		</table>
	</div>
</div>

＆＃13;

jsFiddle Demo to play with

Answer 4

这是另一种选择。您可以使用jQuery mobile中的工具创建一个不错的功能：可折叠标头。这样，您的用户就可以在逻辑上安排的分组中隔离特定的测试结果。

点击/按标题可切换下方内容的可见性。

您可以按照您需要的方式整理事物。

<script src="http://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css" />

<style type="text/css">

    li div { padding: 2px; border: 1px solid; float: left; width: 150px }

    .ui-collapsible-content .ui-filterable{ display: none; }

    li { background-color: #CCCCCC; font-weight: bold; }

    li div.ok { background-color: #E1FFD8; font-weight: bold; }

    li div.error { background-color: #FFB5B5; font-weight: bold; }

    .ui-li-static.ui-collapsible > .ui-collapsible-heading { margin: 0; }

    .ui-li-static.ui-collapsible { padding: 0; }

    .ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn { border-top-width: 0; }

    .ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn, .ui-li-static.ui-collapsible > .ui-collapsible-content { border-bottom-width: 0; }
</style>

<div data-role="collapsible" data-theme="b" data-content-theme- "b">
    <h2>First Category</h2>
    <ul data-role="listview" data-filter="true">
        <li><div class="title">TestWS1</div>
            <div class="ok"> OK </div>
        </li>
        <li><div class="title">TestWS2</div>
            <div class="error"> ERROR </div>
        </li>
        <li><div class="title">TestWS3</div>
            <div class="ok"> OK </div>
        </li>
        <li><div class="title">TestWS4</div>
            <div class="error"> ERROR </div>
        </li>
    </ul>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme- "b">
    <h2>Second Category</h2>
    <ul data-role="listview" data-filter="true">
        <li><div class="title">TestWS10</div>
            <div class="ok"> OK </div>
        </li>
        <li><div class="title">TestWS11</div>
            <div class="error"> ERROR </div>
        </li>
        <li><div class="title">TestWS12</div>
            <div class="ok"> OK </div>
        </li>
        <li><div class="title">TestWS13</div>
            <div class="error"> ERROR </div>
        </li>
    </ul>
</div>

如果时间太长，动态创建的表应该会中断

4 个答案: