[英]Second td above first td + html table
I have a table like this: 我有一张这样的桌子:
<table>
<tbody>
<tr></tr>
<tr></tr>
<tr class="TableContent">
<td class="shouldbeunderTableMenu"></td>
<td class="TableMenu"></td>
</tr>
</tbody>
</table>
As you can see I have a td with class equal to TableMenu
. 如您所见,我有一个td,其类等于TableMenu
。 I would like to position the td above the td with class shouldbeunderTableMenu
. 我想通过类shouldbeunderTableMenu
将td shouldbeunderTableMenu
在td 上方 。
So that the first td is vertically positioned under the second td. 使第一个td垂直位于第二个td之下。 Image to clarify: 图片说明:
But how can I do this? 但是我该怎么办呢?
$(".shouldbeunderTableMenu").before($(".TableMenu"));
$(".shouldbeunderTableMenu").before($(".TableMenu"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr></tr> <tr></tr> <tr class="TableContent"> <td class="shouldbeunderTableMenu">1</td> <td class="TableMenu">2</td> </tr> </tbody> </table>
$(".TableMenu").after($(".shouldbeunderTableMenu"));
$(".TableMenu").after($(".shouldbeunderTableMenu"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr></tr> <tr></tr> <tr class="TableContent"> <td class="shouldbeunderTableMenu">1</td> <td class="TableMenu">2</td> </tr> </tbody> </table>
With jQuery: 使用jQuery:
$('td.TableMenu').each(function() { $(this).prependTo($(this).parent()); });
Or more generally: 或更笼统地说:
$('td.TableMenu').each(function() { $(this).before($(this).siblings('.shouldbeunderTableMenu')); });
Why use all that fancy jQuery when you can use css :P 当可以使用css:P时,为什么要使用所有这些漂亮的jQuery?
td{
border:1px solid black;
display:block;
}
.TableMenu{
margin-top:-45px;
}
.shouldbeunderTableMenu{
margin-top:25px;
}
Working example: http://jsfiddle.net/h0pLe8cw/1/ 工作示例: http : //jsfiddle.net/h0pLe8cw/1/
I would do this: 我会这样做:
$(document).ready(function() {
var shoulder = $(".TableContent .shouldbeunderTableMenu");
var clone = shoulder.clone();
shoulder.remove();
$(".TableContent").append(clone);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.