Question

我有一个html表，其中我有两个部分： -

（i）上半部分

（ii）下半部分

根据用户从下拉列表中选择的选项，两个部分都有一些行可以从上到下移动，反之亦然。

当我从Upper下拉选择较低选项时，我希望用动画将一行移动到下部，反之亦然。

另一件事： - 执行表格排序时，任何人都可以帮助动画效果。我不想使用任何插件（我正在使用java-script sort（）函数）

请查看我的代码并建议我必须为此做些什么。

我在这里粘贴示例代码，请查看我的代码： -

<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>

使用动画在另一个部分中移动表格行

0 个答案: