assign multiple element attributes with .each?

Question

So I have the following table, and I'd like to set all the name attributes to a new value when I add a row to the table. (You probably guessed it: I use the buttons to add and delete rows, and I calculate a new name attribute based on the row index).

<table id="orderstable" >
            <tbody>
    <tr>
        <td align="top"><img src="/images/images/add_button_sm.gif" id="add_" align="top" border="0">
                <img src="/images/images/delete_button_sm.gif" id="del_" border="0">
        </td>
        <td><input name="orderBoxes[0].A" size="3" value="0.0" type="text"></td>
        <td><input name="orderBoxes[0].B" size="3" value="0.0" type="text"></td>
        <td><input name="orderBoxes[0].C" size="3" value="0.0" type="text"></td>
        <td><select name="orderBoxes[0].D">
            <option value="fifty">50</option>
            <option value="oneHundred" selected="selected">100</option>
            <option value="twoHundred">200</option>
            <option value="threeHundred">300</option></select>
        </td>
    </tr>
            </tbody>
</table>

I've tried to use .each to get all the elements and then get at the input.name attribbute.... but I can't get it to work. Any thoughts? My code may not be the most efficient... I'm still a noob:

$("#orderstable > tbody > tr > td > img[id=add_]").click( function(event){
            var row = $(this).closest("tr").get(0);
            var rowCopy=$(row).clone(true);
            $(row).closest("tbody").append(rowCopy);

            $('#orderstable tbody>tr:last>td').each(function(){
                            $(this.input).attr(name);
                            }).val = "test";
            row.className+="add_";

aziz punjani · Accepted Answer · 2011-10-12 17:49:41Z

11

This will grab the last row, and all input form elements. Then you can just set the name via $(this).attr('name')

$('#orderstable tr:last td :input').each(function(){
   $(this).attr('name', 'setyournamehere')
})

answered Oct 12, 2011 at 17:49

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

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

3 Comments

user991945 Over a year ago

This works perfectly. Thanks! SOrry I can't vote it up... not enough rep pts.

user991945 Over a year ago

Given swatkins post above, why does the input here ('#orderstable tr:last td :input') get all input elements, including select while the other post doesn't $(e).find('input').attr('name')? Is

aziz punjani Over a year ago

find('input') gets input elements by tag name. The pseudo selector :input Selects all input, textarea, select and button elements.

swatkins · Accepted Answer · 2011-10-12 18:05:38Z

0

In your .each function, you need to use the arguments to get at the element and find the input:

$("#orderstable > tbody > tr > td > img[id=add_]").click( function(event){
        var row = $(this).closest("tr").get(0);
        var rowCopy=$(row).clone(true);
        $(row).closest("tbody").append(rowCopy);

        $('#orderstable tbody>tr:last>td :input').each(function(i, e){
                var n = $(e).attr('name');
            alert(n);
                        }).val = "test";
        row.className+="add_";
});

http://jsfiddle.net/swatkins/LFvwh/

edited Oct 12, 2011 at 18:05

answered Oct 12, 2011 at 17:51

swatkins

13.6k4 gold badges50 silver badges79 bronze badges

2 Comments

aziz punjani Over a year ago

Problem with this is that there's no input element in the first td so it's undefined, and the last td contains a select not an input. So finding an input would not work consistently.

swatkins Over a year ago

Fair enough, it's an easy fix - add :input to the selector and remove the find method.

Mark Swardstrom · Accepted Answer · 2016-09-12 17:41:57Z

0

Your selector does not seem to be correct. Your table doesn't have the id 'orderstable' and does not have a <tbody>.

edited Sep 12, 2016 at 17:41

Mark Swardstrom

18.3k6 gold badges74 silver badges75 bronze badges

answered Oct 12, 2011 at 17:44

rtcardoso

1112 silver badges8 bronze badges

1 Comment

user991945 Over a year ago

Yeh... I was trying to keep the post to a minimum. I've added it.

Collectives™ on Stack Overflow

assign multiple element attributes with .each?

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related