Jquery not adding index to last row when creating a new row

Question

Please can someone tell me why the first row gets and index value of 1 but every other new row also get 1 instead of 2,3,4 and so on.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>

<body>
    <form>
        <table>
            <thead>
                <tr>
                    <th scope="col">Track</th>
                    <th scope="col">Album</th>
                    <th scope="col">Artist</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td><input name="track[0]" id="track"></td>
                    <td><input name="album[0]" id="album"></td>
                    <td>
                        <select name="artist[0]" id="artist">
                            <option value="">Please select</option>
                            <option value="1">Joe Bloggs</option>
                            <option value="2">Jack Bloggs</option>
                            <option value="3">Tina Bloggs</option>                              
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

    <button>Add Row</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    $(document).ready(function($)
    {
        // trigger event when button is clicked
        $("button").click(function()
        {
            // add new row to table using addTableRow function
            addTableRow($("table"));
            // prevent button redirecting to new page
            return false;
        });

        function addTableRow(table)
        {   

            var $tr = $(table).find("tr:last").clone();
            alert($tr);
            var fname = $("#track").attr("name");
              var nid = fname.match(/\[(.*?)\]/g);
            var idx = nid[0];
            idx = idx.replace(/[[\]]/g,'')
            var n = fname.split("[");

            idx = parseInt(idx) + 1;
            $tr.find("input,select").attr("name", n[0] + "[" + idx + "]");

            $(table).find("tbody tr:last").after($tr);

        };
    });
    </script>       
</body>

I cant seem to work out how to add a new row every time increasing the "name" of each table element by 1 every time ready to use an AJAX post.

You have multiple elements with the same id. Cloning the row is fine but set the id of the inputs and select after doing that. — HMR
– HMR, Commented Mar 27, 2013 at 12:21

letiagoalves · Accepted Answer · 2013-03-27 12:40:19Z

1

The new rows are being created wrong. Artist and Album elements name are always track[0]

Wouldn't be easier to do something like this?

function addTableRow(table) {

    var index = $(table).find("tbody tr").length;
    var $tr = $(table).find("tr:last").clone();
    $tr.find("input,select").each(function (i, k) {
        var old_name = $(k).attr("name");
        var new_name = old_name.replace(index-1, index);
        $(k).attr("name", new_name);
    });

    $(table).find("tbody tr:last").after($tr);
};

DEMO

Also, consider to give a class instead of a id in every input/select and give a id to the row. It would be easier to work with. as @HMR said when cloning the tr the inputs and select id's are cloned as well, adding the row then causes multiple elements with the same id's. This is not good, make sure each element as a unique ID

edited Mar 27, 2013 at 12:40

answered Mar 27, 2013 at 12:30

letiagoalves

11.3k4 gold badges43 silver badges68 bronze badges

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

4 Comments

HMR Over a year ago

though when cloning the tr the inputs and select id's are cloned as well, adding the row then causes multiple elements with the same id's. I suggest changing the id as well.

letiagoalves Over a year ago

yes, I would give a class instead of a id in every td and give a id to the row. It would be easier to work with.

user2215495 Over a year ago

Thank you very much, I'm new to JS, having spent so many years with PHP & ASP, I never needed to do much with JS other than find a script, copy & paste. I'm now going to hit the JS books hard!!

letiagoalves Over a year ago

first learn the principles of JS and then play with jQuery. jQuery framework will save you a lot of time when developing javascript applications

gmaliar · Accepted Answer · 2013-03-27 12:36:00Z

0

How about just counting tr in the tbody instead:

    function addTableRow(table)
    {   
        var $tr = table.find("tbody").find("tr").last().clone();
        var fname = $("#track").attr("name");
        var nid = fname.match(/\[(.*?)\]/g);
        var new_idx = table.find('tbody').find('tr').length;
        var n = fname.split("[");

        idx = parseInt(idx) + 1;
        $tr.find("input,select").attr("name", n[0] + "[" + new_idx + "]");

        $(table).find("tbody tr:last").after($tr);

    };

answered Mar 27, 2013 at 12:36

gmaliar

5,4791 gold badge30 silver badges36 bronze badges

Collectives™ on Stack Overflow

Jquery not adding index to last row when creating a new row

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related