Question

<html>
<head>
<link type="text/css" rel="stylesheet" href="file:///C:/Users/Documents/SmallTest/jquery.jscrollpane.css" media="all" />
<link type="text/css" rel="stylesheet" href="file:///C:/Users/Documents/SmallTest/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" src="file:///C:/Users/Documents/SmallTest/jquery-1.7.1.js"></script>
<script type="text/javascript" src="file:///C:/Users/Documents/SmallTest/jquery.jscrollpane.min.js"></script>

<style type="text/css">
.scroll-pane
{
    width: 100%;
    height: 60px;
    overflow: auto;
    white-space: nowrap;
}
.horizontal-only
{
    height: auto;
    max-height: 200px;
}
table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}
</style>

<script type="text/javascript">     
$(document).ready(function() 
{         
    $('.scroll-pane').jScrollPane();
    $(this).build();
}); 

var map1 = { "iDate":"test_value1", "iName":"test_value2" , "iFile":"test value three 3 " }; 
var map2 = { "iDate":"nexttest_value1", "iName":"nexttest_value2", "iFile":"next test value three 3" }; 

var list = new Array( map1, map2 );
list[0] = map1;
list[1] = map2;

jQuery.fn.build = ( function() 
{
    jQuery.each( list, function( index, map ) {
        var trTag = $( "<tr></tr>" ).appendTo($( "#hpTable > tbody"));     
        jQuery.each( map, function( key, value ) 
        {             
            var tdTag = $( '<td/>' ).appendTo( trTag );             
            var divTag = $( "<div class='scroll-pane horizontal-only' id='container' style='vertical-align: top'/>" ).appendTo( tdTag );             
            $( "<p>" + value + "</p>" ).appendTo( divTag );
        });
    });
    $( '#hpTable' ).show();
    $('.scroll-pane').jScrollPane();
});
</script> 

</head>
<body>
<table id="popFields" width="10%">
<thead></thead>
<tbody>
    <tr><td>
        <select id="numberList">
            <option value="1" selected>one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </td>
    <td><div id="firstDiv" class="scroll-pane horizontal-only"><p>this is a test for the scrollbar div tag. ljilkjlkjlkj lkjl ljfh gfyt gyjhy uyg  jhgj kjhg jhgu jfse dgf fdrh gfhtf hgf gfh td ghtffg ug fghgf.</p></div></td>
    </tr>
</tbody>
</table>
<br>

<table id="hpTable" cellpadding="0" width="30px">
<thead><tr>
        <th>Date</th>
        <th>Name</th>
        <th width="2%">File</th>
    </tr>
</thead>
<tbody>
</tbody>
</table></body></html>

大家好，我又回来了，用JQuery变得更好。这是我的问题的一个小例子（如上所示）。我正在使用这个精彩的jScrollPane插件，但由于某种原因我不能让两个不同的表工作...如果我在一个表上使用它它工作正常。但是，当我有两个表时，我无法显示滚动条。

我希望能够让每个表都能够拥有一个可以拥有滚动条的单元格，如果文本对于单元格来说太长，单元格将显示滚动条。

我试着玩桌子和细胞的大小，但这似乎没有区别。使用不同的div ID似乎也没有任何影响。

提前感谢您审核我的帖子，感谢所有帮助！星期五快乐！

jscrollpane仅适用于一个表

0 个答案: