CODEWITHSUNDEEP
jqueryhtml-table
DavidMC1982
DavidMC1982

Reputation: 57

Copy html table column values to specified column input

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.

Upvotes: 2

Views: 1863

Answers (2)

Syon
Syon

Reputation: 1614

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

Upvotes: 2

Barmar
Barmar

Reputation: 781726

$("#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

Upvotes: 1

Related Questions