assign multiple element attributes with .each?

10,671

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')
})
Share:
10,671
user991945
Author by

user991945

Updated on June 04, 2022

Comments

  • user991945
    user991945 almost 2 years

    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_";
    
  • user991945
    user991945 over 12 years
    Yeh... I was trying to keep the post to a minimum. I've added it.
  • aziz punjani
    aziz punjani over 12 years
    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
    swatkins over 12 years
    Fair enough, it's an easy fix - add :input to the selector and remove the find method.
  • user991945
    user991945 over 12 years
    This works perfectly. Thanks! SOrry I can't vote it up... not enough rep pts.
  • user991945
    user991945 over 12 years
    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
    aziz punjani over 12 years
    find('input') gets input elements by tag name. The pseudo selector :input Selects all input, textarea, select and button elements.