jquery彈出式滾動條和列對齊

-1

我正在尋找一個jQuery的彈出式菜單，它有一個垂直滾動條，並允許顯示數據，就好像它在模仿Datagrid，除了行不可見的事實。jquery彈出式滾動條和列對齊

我的意思是類似的東西應該顯示在彈出

字段1字段2字段3

值1值1值1

值2值2值2

如果這構成元素的lentgh列的長度比垂直滾動條應顯示的屏幕高度更長，並允許替換值。

我搜索了一段時間，但沒有找到任何東西，所以我希望你能幫助我解決這個問題，因爲從零開始做起來似乎非常費時。

雖然我已經被命令通過jQuery來做它，但只要它能夠工作，它並不重要，所以隨意命名其他的替代品，如果它們存在的話，這些替代品是越來越少的，唯一的限制它是在客戶端使用JavaScript完成的，因爲其餘的代碼都是在這個基礎上完成的。

感謝您的幫助。

來源

2014-11-25 mylket

對不起，表不顯示正確，我試圖改善它。 – mylket 2014-11-25 07:50:53

jquery對話框怎麼樣？你有沒有嘗試過一些東西？代碼在哪裏？ – 2014-11-25 07:56:35

對於你可以使用jQuery UI的對話框。爲了滿足其餘的要求，只需添加一些CSS。這裏有你的案例。我希望它可以幫助你：

<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
     <style> 
      #dialog-content { 
       height: 200px; 
       /* Show scrolls if overflows! */ 
       overflow: scroll; 
      } 

      #dialog-content th, 
      #dialog-content td { 
       /* Big rows! */ 
       padding: 20px; 
      } 
     </style> 
     <script> 
      $(document).ready(function() { 
       $("#dialog").dialog(); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="dialog" title="Basic dialog"> 
      <div id="dialog-content"> 
       <table> 
        <thead> 
         <tr> 
          <th>Field1</th> 
          <th>Field2</th> 
          <th>Field3</th> 
          <th>Field4</th> 
          <th>Field5</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>Value1</td> 
          <td>Value2</td> 
          <td>Value3</td> 
          <td>Value4</td> 
          <td>Value5</td> 
         </tr> 
         <tr> 
          <td>Value1</td> 
          <td>Value2</td> 
          <td>Value3</td> 
          <td>Value4</td> 
          <td>Value5</td> 
         </tr> 
         <tr> 
          <td>Value1</td> 
          <td>Value2</td> 
          <td>Value3</td> 
          <td>Value4</td> 
          <td>Value5</td> 
         </tr> 
         <tr> 
          <td>Value1</td> 
          <td>Value2</td> 
          <td>Value3</td> 
          <td>Value4</td> 
          <td>Value5</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </body> 
</html>

來源

2014-11-25 08:04:18

jquery彈出式滾動條和列對齊

回答

相關問題