本文介绍了一种使用Bootstrap样式的表格，通过jQuery实现了表格行点击后向上或向下移动的功能。该方法适用于需要灵活调整表格行顺序的应用场景。
code display ::
<!DOCTYPE HTML>
<html>
<head>
<link href="bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,000</td>
<td>Lorem</td>
<td>ipsum</td>
<td class="shangyi">dolor</td>
<td class="xiayi">sit</td>
</tr>
<tr>
<td>1,001</td>
<td>amet</td>
<td>consectetur</td>
<td class="shangyi">adipiscing</td>
<td class="xiayi">elit</td>
</tr>
<tr>
<td>1,002</td>
<td>Integer</td>
<td>nec</td>
<td class="shangyi">odio</td>
<td class="xiayi">Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td class="shangyi">cursus</td>
<td class="xiayi">ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td class="shangyi">Sed</td>
<td class="xiayi">nisi</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script>
$(function(){
$(".shangyi").click(function(){
var $currentTr = $(this).parent();
var $prevTr = $currentTr.prev();
if($prevTr){
$currentTr.insertBefore($prevTr);
}
});
$(".xiayi").on('click',function(){
var $currentTr = $(this).parent();
var $nextTr = $currentTr.next();
if($nextTr){
$currentTr.insertAfter($nextTr);
}
});
});
</script>
</body>
</html>
以上代码展示表格行点击事件的上下移动的效果，表格用到了bootstrap的样式
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
