2017-09-21 39 views
0

試圖將Jqueryui可排序交互放入引導表中,以便人們可以移動行來比較它們。引導程序干擾我的Jqueryui還是缺少什​​麼?

那麼Jqueryui與Bootstrap不兼容?我不能將表格行放入列表中嗎?像這裏有什麼問題?我不理解這個問題,因爲沒有行可以排序/移動。

HTML和JS-

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<link rel="stylesheet" href="./Bombers Hockey_files/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
<script src="./Bombers Hockey_files/bootstrap.min.js.download" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
<link href="./Bombers Hockey_files/hockey.css" rel="stylesheet" type="text/css"> 
<script src="./Bombers Hockey_files/jquery.min.js.download"></script> 
<script src="./Bombers Hockey_files/popper.min.js.download"></script> 

     <script> 
     $(function() { 
     $("#sortable").sortable(); 
     $("#sortable").disableSelection(); 
     }); 
     </script> 

    <table class="table table-hover table-striped"> 
      <thead> 
     <tr> 
     <th>Name</th> 
     <th>GP</th> 
     <th>Goals</th> 
     <th>Assists</th> 
     <th>Points</th> 
     <th>Penalties</th> 
     </tr> 
    </thead> 
     <tbody> 
    <ul id="sortable"> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Adam</td> 
     <td>12</td> 
     <td>2</td> 
     <td>0</td> 
     <td>2</td> 
     <td>2</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Braden</td> 
     <td>8</td> 
     <td>0</td> 
     <td>1</td> 
     <td>1</td> 
     <td>2</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Caleb</td> 
     <td>10</td> 
     <td>2</td> 
     <td>1</td> 
     <td>3</td> 
     <td>6</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>John</td> 
     <td>8</td> 
     <td>2</td> 
     <td>3</td> 
     <td>5</td> 
     <td>8</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Ryan</td> 
     <td>8</td> 
     <td>7</td> 
     <td>0</td> 
     <td>7</td> 
     <td>26</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Kyle</td> 
     <td>10</td> 
     <td>3</td> 
     <td>6</td> 
     <td>9</td> 
     <td>8</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Sean</td> 
     <td>8</td> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>8</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Seth</td> 
     <td>11</td> 
     <td>4</td> 
     <td>1</td> 
     <td>5</td> 
     <td>47</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Kyle Z</td> 
     <td>8</td> 
     <td>2</td> 
     <td>0</td> 
     <td>2</td> 
     <td>0</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Gary</td> 
     <td>10</td> 
     <td>7</td> 
     <td>3</td> 
     <td>10</td> 
     <td>6</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Mark</td> 
     <td>12</td> 
     <td>6</td> 
     <td>5</td> 
     <td>11</td> 
     <td>30</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Mike</td> 
     <td>12</td> 
     <td>1</td> 
     <td>6</td> 
     <td>7</td> 
     <td>0</td> 
     </tr> 
    </li> 
    <li class="ui-state-default"> 
     <tr> 
     <td>Tim</td> 
     <td>1</td> 
     <td>0</td> 
     <td>1</td> 
     <td>1</td> 
     <td>2</td> 
     </tr> 
    </li> 
    </ul> 
    </tbody></table> 

CSS -

#sortable { 
    list-style-type: none; margin: 0; padding: 0; width: 60%; 
} 

#sortable li { 
    margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; 
} 

#sortable li span { 
    position: absolute; margin-left: -1.3em; 
} 

回答

0

嘗試重新安排你的鏈接和腳本標記,看看有沒有做它。這可能是別的什麼東西壓倒一切的情況:

<link rel="stylesheet" href="./Bombers Hockey_files/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
<link href="./Bombers Hockey_files/hockey.css" rel="stylesheet" type="text/css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script src="./Bombers Hockey_files/bootstrap.min.js.download" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
<script src="./Bombers Hockey_files/jquery.min.js.download"></script> 
<script src="./Bombers Hockey_files/popper.min.js.download"></script> 
+0

複製並嘗試了你的安排和仍然沒有。行本身甚至無法移動,這讓我認爲行不能放入列表項中。 Idk這件事讓我感到困惑,一直盯着代碼。 –

0

<tbody>採用<ul><li>標籤是無效的,不必要的,因爲<tr><td>結構基本上列出。只需製作表格排序的<tbody>即可。

https://jsfiddle.net/66mj031n/