Is it possible to wrap a tbody tag

I have the following code

<table style="width:100%;">

    <thead >

        <tr>

            <td style="width:6%">ID</td>               

            <td style="width:94%">Notes</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Some Notes</td>

        </tr>

    </tbody>

    <tbody>

        <tr>

            <td>2</td>

            <td>More Notes</td>

        </tr>

    </tbody>

</table>

This works fine! However, I need to add the Jquery sortable. This is where I'm stuck.

The only thing that needs to be sortable is the tbody section. However, I don't know how to wrap them.

If I wrap the tbody with a div, I get told off as this is invalid HTML. EG

<div id ="someIdForParent">

   <tbody>...</tbody><tbody>...</tbody>

</div>

However, this is what I'd like to do so the tbody can have the containment as "parent".

I am unable to control the layout of the HTML, in that, it will only come as an array of tbody elements

Can this be done with valid HTML(5)?

edited Jan 2 at 19:11

Brian Tompsett - 汤莱恩

4,2421339103

asked Jan 2 at 19:04

MyDaftQuestions

29422564

2

"Can this be done with valid HTML..?" - no, the only element that can wrap, or contain, a <tbody> element is a <table>; can you apply the sortable to the parent table?

– David Thomas
Jan 2 at 19:10

@DavidThomas Thank you. I had the feeling it wasn't possible, I did read the docs and it's nice to know that I had read them correctly.

– MyDaftQuestions
Jan 2 at 19:28

add a comment |

I have the following code

<table style="width:100%;">

    <thead >

        <tr>

            <td style="width:6%">ID</td>               

            <td style="width:94%">Notes</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Some Notes</td>

        </tr>

    </tbody>

    <tbody>

        <tr>

            <td>2</td>

            <td>More Notes</td>

        </tr>

    </tbody>

</table>

This works fine! However, I need to add the Jquery sortable. This is where I'm stuck.

The only thing that needs to be sortable is the tbody section. However, I don't know how to wrap them.

If I wrap the tbody with a div, I get told off as this is invalid HTML. EG

<div id ="someIdForParent">

   <tbody>...</tbody><tbody>...</tbody>

</div>

However, this is what I'd like to do so the tbody can have the containment as "parent".

I am unable to control the layout of the HTML, in that, it will only come as an array of tbody elements

Can this be done with valid HTML(5)?

edited Jan 2 at 19:11

Brian Tompsett - 汤莱恩

4,2421339103

asked Jan 2 at 19:04

MyDaftQuestions

29422564

2

"Can this be done with valid HTML..?" - no, the only element that can wrap, or contain, a <tbody> element is a <table>; can you apply the sortable to the parent table?

– David Thomas
Jan 2 at 19:10

@DavidThomas Thank you. I had the feeling it wasn't possible, I did read the docs and it's nice to know that I had read them correctly.

– MyDaftQuestions
Jan 2 at 19:28

add a comment |

I have the following code

<table style="width:100%;">

    <thead >

        <tr>

            <td style="width:6%">ID</td>               

            <td style="width:94%">Notes</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Some Notes</td>

        </tr>

    </tbody>

    <tbody>

        <tr>

            <td>2</td>

            <td>More Notes</td>

        </tr>

    </tbody>

</table>

This works fine! However, I need to add the Jquery sortable. This is where I'm stuck.

The only thing that needs to be sortable is the tbody section. However, I don't know how to wrap them.

If I wrap the tbody with a div, I get told off as this is invalid HTML. EG

<div id ="someIdForParent">

   <tbody>...</tbody><tbody>...</tbody>

</div>

However, this is what I'd like to do so the tbody can have the containment as "parent".

I am unable to control the layout of the HTML, in that, it will only come as an array of tbody elements

Can this be done with valid HTML(5)?

edited Jan 2 at 19:11

Brian Tompsett - 汤莱恩

4,2421339103

asked Jan 2 at 19:04

MyDaftQuestions

29422564

I have the following code

<table style="width:100%;">

    <thead >

        <tr>

            <td style="width:6%">ID</td>               

            <td style="width:94%">Notes</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Some Notes</td>

        </tr>

    </tbody>

    <tbody>

        <tr>

            <td>2</td>

            <td>More Notes</td>

        </tr>

    </tbody>

</table>

This works fine! However, I need to add the Jquery sortable. This is where I'm stuck.

The only thing that needs to be sortable is the tbody section. However, I don't know how to wrap them.

If I wrap the tbody with a div, I get told off as this is invalid HTML. EG

<div id ="someIdForParent">

   <tbody>...</tbody><tbody>...</tbody>

</div>

However, this is what I'd like to do so the tbody can have the containment as "parent".

I am unable to control the layout of the HTML, in that, it will only come as an array of tbody elements

Can this be done with valid HTML(5)?

jquery html html-table jquery-ui-sortable

edited Jan 2 at 19:11

Brian Tompsett - 汤莱恩

4,2421339103

asked Jan 2 at 19:04

MyDaftQuestions

29422564

edited Jan 2 at 19:11

Brian Tompsett - 汤莱恩

4,2421339103

asked Jan 2 at 19:04

MyDaftQuestions

29422564

edited Jan 2 at 19:11

Brian Tompsett - 汤莱恩

4,2421339103

edited Jan 2 at 19:11

Brian Tompsett - 汤莱恩

4,2421339103

edited Jan 2 at 19:11

Brian Tompsett - 汤莱恩

4,2421339103

asked Jan 2 at 19:04

MyDaftQuestions

29422564

asked Jan 2 at 19:04

MyDaftQuestions

29422564

asked Jan 2 at 19:04

MyDaftQuestions

29422564

2

"Can this be done with valid HTML..?" - no, the only element that can wrap, or contain, a <tbody> element is a <table>; can you apply the sortable to the parent table?

– David Thomas
Jan 2 at 19:10

@DavidThomas Thank you. I had the feeling it wasn't possible, I did read the docs and it's nice to know that I had read them correctly.

– MyDaftQuestions
Jan 2 at 19:28

add a comment |

2

"Can this be done with valid HTML..?" - no, the only element that can wrap, or contain, a <tbody> element is a <table>; can you apply the sortable to the parent table?

– David Thomas
Jan 2 at 19:10

@DavidThomas Thank you. I had the feeling it wasn't possible, I did read the docs and it's nice to know that I had read them correctly.

– MyDaftQuestions
Jan 2 at 19:28

"Can this be done with valid HTML..?" - no, the only element that can wrap, or contain, a <tbody> element is a <table>; can you apply the sortable to the parent table?

– David Thomas
Jan 2 at 19:10

@DavidThomas Thank you. I had the feeling it wasn't possible, I did read the docs and it's nice to know that I had read them correctly.

– MyDaftQuestions
Jan 2 at 19:28

add a comment |

1 Answer
1

active

oldest

votes

If you want to leave the first row in place, use:

$('table').sortable({items: 'tr:not(:first)'});

answered Jan 2 at 19:16

Diodeus - James MacFarlane

95.4k28139166

This is perfect. Thank you for taking the time to realise what I was trying to achieve and suggesting a solution. It wasn't clear from api.jqueryui.com/sortable/#option-items that this was an option (I did look and try myself first)

– MyDaftQuestions
Jan 2 at 19:27

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011826%2fis-it-possible-to-wrap-a-tbody-tag%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

If you want to leave the first row in place, use:

$('table').sortable({items: 'tr:not(:first)'});

answered Jan 2 at 19:16

Diodeus - James MacFarlane

95.4k28139166

This is perfect. Thank you for taking the time to realise what I was trying to achieve and suggesting a solution. It wasn't clear from api.jqueryui.com/sortable/#option-items that this was an option (I did look and try myself first)

– MyDaftQuestions
Jan 2 at 19:27

add a comment |

If you want to leave the first row in place, use:

$('table').sortable({items: 'tr:not(:first)'});

answered Jan 2 at 19:16

Diodeus - James MacFarlane

95.4k28139166

This is perfect. Thank you for taking the time to realise what I was trying to achieve and suggesting a solution. It wasn't clear from api.jqueryui.com/sortable/#option-items that this was an option (I did look and try myself first)

– MyDaftQuestions
Jan 2 at 19:27

add a comment |

If you want to leave the first row in place, use:

$('table').sortable({items: 'tr:not(:first)'});

answered Jan 2 at 19:16

Diodeus - James MacFarlane

95.4k28139166

If you want to leave the first row in place, use:

$('table').sortable({items: 'tr:not(:first)'});

answered Jan 2 at 19:16

Diodeus - James MacFarlane

95.4k28139166

answered Jan 2 at 19:16

Diodeus - James MacFarlane

95.4k28139166

answered Jan 2 at 19:16

Diodeus - James MacFarlane

95.4k28139166

answered Jan 2 at 19:16

Diodeus - James MacFarlane

95.4k28139166

This is perfect. Thank you for taking the time to realise what I was trying to achieve and suggesting a solution. It wasn't clear from api.jqueryui.com/sortable/#option-items that this was an option (I did look and try myself first)

– MyDaftQuestions
Jan 2 at 19:27

add a comment |

This is perfect. Thank you for taking the time to realise what I was trying to achieve and suggesting a solution. It wasn't clear from api.jqueryui.com/sortable/#option-items that this was an option (I did look and try myself first)

– MyDaftQuestions
Jan 2 at 19:27

This is perfect. Thank you for taking the time to realise what I was trying to achieve and suggesting a solution. It wasn't clear from api.jqueryui.com/sortable/#option-items that this was an option (I did look and try myself first)

– MyDaftQuestions
Jan 2 at 19:27

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu