Issues with adding new table's row with JQuery

Question

I follow the instruction for adding new table’s row from: Add table row in jQuery

A new row was successfully added but it didn’t get the other rows’ feature (highlight, draggable,…).

The table:

<table id="pubTab">
            <thead>
            <tr>
                <td align="center">col1</td>
                <td align="center">col2</td>
                <td align="center">col3</td>
                <td align="center">col4</td>
            </tr>
            </thead>
            <tbody>
            <tr id="1">
                <td>+++<input type="text" size="40"/></td>
                <td><input type="text" size="10"/></td>
                <td><input type="text" size="50"/></td>
                <td><input type="text" size="10" /></td>
            </tr>
            <tr id="2">
                <td>+++<input type="text" size="40"/></td>
                <td><input type="text" size="10"/></td>
                <td><input type="text" size="50"/></td>
                <td><input type="text" size="10"/></td>
            </tr>
            </tbody>
        </table>
<input id="addPubTab" type="button" value="ADD" style="background-color:green; width: 170px"/>

The jQuery script:

<script type="text/javascript">
        $(document).ready(function(){
            $("#addPubTab").click(function(){
                var id = "3";
                var value = "<tr id=\""+id+"\">"+
                            "<td>+++<input type=\"text\" size=\"40\" name=\"collection_name\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"10\" name=\"service_name\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"50\" name=\"out_fname\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"10\" name=\"service_id\""+id+"/></td>"+
                            "</tr>";
                $('#pubTab tbody').append(value);
            });
        });
    </script>

The problem Problem: It added the new row but I cannot drag it (up/down) as I drag the other tow (there are no curser for dragging).

Inspecting elements resolve with:

<table id="pubTab">
<thead>_</thead>
<tbody>
    <tr id=”1” style=”cursor: move; “ class>_</tr>
    <tr id=”2” style=”cursor: move; “ class>_</tr>
    <tr id=”3”>_</tr>
</tbody>

Please note that I am using the jQuery script (dragging/sorting):

$(function() {  $("#pubTab:not(thead)").tableDnD();   });

Please assist.

I think u might have to destroy the initial draggable, and then reassign it again, to update the new children — Val
– Val, Commented Feb 24, 2011 at 11:31

awj · Accepted Answer · 2012-05-17 07:20:14Z

4

The tableDnD plugin has a method which may have been added since this question was originally posted.

.tableDnDUpdate()

As the documentation states

cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.

answered May 17, 2012 at 7:20

awj

8,01917 gold badges77 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eduardo Rascon Over a year ago

this method is not in the current tablednd stable release.

meataxe Over a year ago

$("...").tableDnDUpdate() was added by v0.6, which was released on 2011-12-02.

Matej Baćo · Accepted Answer · 2011-02-24 11:33:06Z

0

Try reinitialization of tableDnD plugin after you insert new row.

Other solution would be to clone one existing row and change data in it.

answered Feb 24, 2011 at 11:33

Matej Baćo

1,3322 gold badges10 silver badges12 bronze badges

2 Comments

Mike Over a year ago

Thanks, How to reinitialization it?

Matej Baćo Over a year ago

$("#pubTab:not(thead)").tableDnD();

Just Jake · Accepted Answer · 2011-02-24 11:33:57Z

0

Your new table rows aren't draggable because you haven't integrated them into your drag and drop object. They remain static HTML while your original rows are all fancy and interactive because you called .tableDnD() on them. See if calling .tableDnD on your new rows works, or update .tableDnD to use .live(). From the .live() page:

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

The .live() documentation page describes precisely the issue you are having, well worth a look!

answered Feb 24, 2011 at 11:33

Just Jake

4,9185 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

Issues with adding new table's row with JQuery

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related