Copy html table column values to specified column input

Question

The HTML table below is generated in my PHP code and can have any number of rows, up to circa 500 or more.

<table>
    <tr>
        <th>Name</th>
        <th>Working</th>    
        <th>Non-Working</th>    
        <th>Top Working Rate</th>
    </tr>
    <tr>
        <td>DX</td>
        <td><input type="text" name="items[4357][1]" value="1.00"></td>
        <td><input type="text" name="items[4357][2]" value="1.00"></td>
        <td>None</td>
    </tr>
    <tr>
        <td>Kindle</td>
        <td><input type="text" name="items[4358][1]" value="1.00"></td>
        <td><input type="text" name="items[4358][2]" value="1.00"></td>
        <td>None</td>
    </tr>
    <tr>
        <td>Kindle 2</td>
        <td><input type="text" name="items[4359][1]" value="1.00"></td>
        <td><input type="text" name="items[4359][2]" value="1.00"></td>
        <td>None</td>
    </tr>
    <tr>
        <td>Kindle 2 3G</td>
        <td><input type="text" name="items[4360][1]" value="1.00"></td>
        <td><input type="text" name="items[4360][2]" value="1.00"></td>
        <td>None</td>
    </tr>
    <tr>
        <td>Kindle 3 3G</td>
        <td><input type="text" name="items[4361][1]" value="1.00"></td>
        <td><input type="text" name="items[4361][2]" value="1.00"></td>
        <td>None</td>
    </tr>
    <tr>
        <td>Kindle Fire</td>
        <td><input type="text" name="items[4362][1]" value="1.00"></td>
        <td><input type="text" name="items[4362][2]" value="1.00"></td>
        <td>60.00</td>
    </tr>
    <tr><td><input type="submit" value="Save Rates"></td></tr>
</table>

By clicking on a link or button, I want to copy the values in the 4th column to input values in the 2nd. If the value is "None", the row shouldn't be copied. Preferably, the solution will enable me to pass as parameters the columns to copy from/to but I can adapt if necessary.

Obviously, when working with larger tables, the code could get slow, but some delay is expected by the end-users.

Syon · Accepted Answer · 2012-12-20 20:26:41Z

2

You could try this:

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
    $('tr').each(function() {
        var $this = $(this),
            prc = $this.find('td').eq('3').html();
        if (prc !== 'None') {
            $this.find('td').eq('1').find('input').val(prc);
        }
    });
});

FiddleSticks

edited Dec 20, 2012 at 20:26

answered Dec 20, 2012 at 20:15

Syon

1,61413 silver badges16 bronze badges

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

Comments

Barmar · Accepted Answer · 2012-12-20 20:26:36Z

1

$("#mybutton").click(function(e) {
    e.preventDefault();
    $("table").children("tbody").children("tr").each(function(i, row) {
        var cols = $(row).find("td");
        if (cols.length > 0 && $(cols[3]).text() != 'None') { /* skip rows with only <th> */
            $(cols[1]).find("input").val($(cols[3]).text());
        };
    });
});

FIDDLE

edited Dec 20, 2012 at 20:26

answered Dec 20, 2012 at 20:15

Barmar

789k57 gold badges555 silver badges669 bronze badges

1 Comment

DavidMC1982 Over a year ago

Thanks, works great also. I'd accept your answer also if I could. Will test both for performance on a larger dataset and may revise my accepted solution.

Collectives™ on Stack Overflow

Copy html table column values to specified column input

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related