CODEWITHSUNDEEP
javascriptjquerycsshtml-table
nielsv
nielsv

Reputation: 6820

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. I would like to position the td above the td with class shouldbeunderTableMenu.

So that the first td is vertically positioned under the second td. Image to clarify:

enter image description here

But how can I do this?

Upvotes: 1

Views: 276

Answers (4)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try to use before,

$(".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>

or use after

$(".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>

Upvotes: 6

m0bi5
m0bi5

Reputation: 9472

Why use all that fancy jQuery when you can use css :P

td{
    border:1px solid black;
    display:block;    
}
.TableMenu{
    margin-top:-45px;    
}
.shouldbeunderTableMenu{
    margin-top:25px;
}

Working example:http://jsfiddle.net/h0pLe8cw/1/

Upvotes: 1

CodeGodie
CodeGodie

Reputation: 12132

I would do this:

$(document).ready(function() {
    var shoulder  =  $(".TableContent .shouldbeunderTableMenu");
    var clone = shoulder.clone();
    shoulder.remove();
    $(".TableContent").append(clone);
});

Upvotes: 0

Alex
Alex

Reputation: 10216

With jQuery:

$('td.TableMenu').each(function() { $(this).prependTo($(this).parent()); });

Or more generally:

$('td.TableMenu').each(function() { $(this).before($(this).siblings('.shouldbeunderTableMenu')); });

Upvotes: 3

Related Questions