[英]Is bootstrap interfering with my Jqueryui or am i missing something?
Trying to put Jqueryui Sortable interaction into a Bootstrap table so people can move rows around to compare them. 尝试将Jqueryui Sortable交互放入Bootstrap表中,以便人们可以四处移动行以进行比较。
So is the Jqueryui not compatable with Bootstrap? 那么Jqueryui是否与Bootstrap不兼容? Can I not put table rows in lists? 我不能将表行放在列表中吗? Like what is the problem here? 像这里的问题是什么? Im not understanding the issue cause none of the rows are sortable/moving. 我不明白这个问题,因为没有行可排序/移动。
HTML and JS- 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 - 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;
}
Try re-arranging your link and script tags and see if that does it. 尝试重新排列链接和脚本标签,看看是否可以。 It could be case of something overriding something else: 可能是某些东西压倒其他东西的情况:
<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>
The use of <ul><li>
tags inside <tbody>
are invalid and unnecessary as <tr><td>
elements are basically lists. 在<tbody>
中使用<ul><li>
标记是无效且不必要的,因为<tr><td>
元素基本上是列表。 Just making the <tbody>
of your table sortable works just fine. 只需使表的<tbody>
可排序就可以了。
https://jsfiddle.net/66mj031n/ https://jsfiddle.net/66mj031n/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.