Javascript 使用动画移动另一节中的表行
我有一个html表，其中有两个部分：- （i） 上段 （ii）下段 根据用户从下拉列表中选择的选项，这两个部分都有一些行可以从上到下移动，或者从下到上移动 当我从“上”下拉列表中选择“下”选项时，我想用动画将一行移动到下半部分，反之亦然 另一件事：-当执行表排序时，任何人都可以在动画效果方面提供帮助。我不想使用任何插件（我使用的是java脚本sort（）函数） 请查看我的代码，并建议我必须为此做些什么 我正在粘贴示例代码，请查看我的代码：-Javascript 使用动画移动另一节中的表行,javascript,jquery,html,animation,Javascript,Jquery,Html,Animation,我有一个html表，其中有两个部分：- （i） 上段 （ii）下段 根据用户从下拉列表中选择的选项，这两个部分都有一些行可以从上到下移动，或者从下到上移动 当我从“上”下拉列表中选择“下”选项时，我想用动画将一行移动到下半部分，反之亦然 另一件事：-当执行表排序时，任何人都可以在动画效果方面提供帮助。我不想使用任何插件（我使用的是java脚本sort（）函数） 请查看我的代码，并建议我必须为此做些什么 我正在粘贴示例代码，请查看我的代码：- <html> <head> &
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table class="animatedTable">
<tbody>
<tr style="background-color:white;" class="rowUpperSection">
<td>Upper Section</td>
</tr>
<tr style="background-color:green" class="upperRow">
<td>row 1 upper section</td>
<td>
<select>
<option>
Choose
</option>
<option>
Go to lower
</option>
</select>
</td>
</tr>
<tr style="background-color:gray" class="upperRow">
<td>row 2 upper section</td>
<td>
<select>
<option>
Choose
</option>
<option>
Go to lower
</option>
</select>
</td>
</tr>
<tr style="background-color:green" class="upperRow">
<td>row 3 upper section</td>
<td>
<select>
<option>
Choose
</option>
<option>
Go to lower
</option>
</select>
</td>
</tr>
<tr class="blankRow separtor" style="background-color:white;"><td><br/></td></tr>
<tr style="background-color:white;" class="rowLowerSection">
<td>Lower Section</td>
</tr>
<tr style="background-color:gray" class="lowerRow">
<td>row 1 lower section</td>
<td>
<select>
<option>
Choose
</option>
<option>
Go to Upper
</option>
</select>
</td>
</tr>
<tr style="background-color:green" class="lowerRow">
<td>row 1 lower section</td>
<td>
<select>
<option>
Choose
</option>
<option>
Go to Upper
</option>
</select>
</td>
</tr>
<tr style="background-color:gray" class="lowerRow">
<td>row 1 lower section</td>
<td>
<select>
<option>
Choose
</option>
<option>
Go to Upper
</option>
</select>
</td>
</tr>
</tbody>
</table>
<script>
$('select').change(function(){
var _this = $(this),
row = _this.parents('tr');
if(row.hasClass('upperRow'))
{
row.removeClass('upperRow').addClass('lowerRow');
row.remove();
$('.rowLowerSection').after(row);
}
else{
row.removeClass('lowerRow').addClass('upperRow');
row.remove();
$('.rowUpperSection').after(row);
}
});
</script>
</body>
</html>
上段
第一排上段
选择
下
第2排上段
选择
下
第3排上段
选择
下
下部
第1行下段
选择
上
第1行下段
选择
上
第1行下段
选择
上
$（'select'）.change（函数（）{
var_this=$（this），
行=_this.parents（'tr'）；
if（row.hasClass（'upperRow'））
{
行.removeClass（'upperRow'）.addClass（'lowerRow'）；
row.remove（）；
$（'.rowLowerSection'）。在（行）之后；
}
否则{
行.removeClass（'lowerRow'）.addClass（'upperRow'）；
row.remove（）；
$（'.rowUpperSection'）。在（行）之后；
}
});