2017-09-21 107 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/