CODEWITHSUNDEEP
javascriptjqueryjquery-mobilehtml-table
Vini
Vini

Reputation: 977

Column toggle not working when append the table rows dynamically

In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.

<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
    <tbody id="tb" >
        <thead id="th">
            <tr id="tr1">
                <th>First</th>
                <th data-priority="1">Second</th>
                <th data-priority="2">third</th>
            </tr>

        </thead>
    </tbody>
    </table>

Here is the Fiddle what I tried.

I referred this jQuery mobile document.

Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).

Upvotes: 0

Views: 1186

Answers (2)

efkan
efkan

Reputation: 13227

Edited:

New link is the below to locate created new row on the top of the table

http://jsfiddle.net/txej8qhj/6/

The below link works fine;

http://jsfiddle.net/txej8qhj/3/

Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;

<table>
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

Check the below link out to use as guide;

http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog

Upvotes: 2

Ankit Saroch
Ankit Saroch

Reputation: 690

You need to call refresh and trigger create functions on the table element.

Please, try the below:

 $("#tr1").after(newrow);
 $('#tab').table("refresh").trigger("create");

Upvotes: 2

Related Questions