将html表列值复制到指定的列输入

时间:2012-12-20 20:05:38

标签: jquery html-table

下面的HTML表格是在我的PHP代码中生成的,可以包含任意数量的行,最多可达500或更多。

<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>

通过单击链接或按钮,我想将第4列中的值复制到第2列中的输入值。如果值为“None”,则不应复制该行。优选地,该解决方案将使我能够将列作为参数传递给/从而复制,但是如果需要我可以进行调整。

显然,在处理较大的表时,代码可能会变慢,但最终用户可能会有一些延迟。

2 个答案:

答案 0 :(得分:2)

你可以试试这个:

$('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

答案 1 :(得分: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

相关问题