javascript - 使用选定的表格行预填充选择下拉列表

Question

我有一个这样的表结构

Fruit         Price        Qty
Apple          30          10
Orange         20          20
Grapes         12          10
pineapple      10           5

现在，当我从此表中选择任何行时，我想在选择下拉列表中预先设置相应的值。

例如，如果我从表中选择 Apple，我需要在 select 语句中预先设置表中所选行的相应值，即 Fruit = Apple， Price = 30 和 Qty = 10 在我相应的选择语句中。

我该怎么做？

Answer 1

DEMO HERE

假设您的 html 如下所示:

    <table class="fruits">
    <thead>
        <th>Fruit</th>
        <th>Price</th>
        <th>Qty</th>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>30</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>20</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Grapes</td>
            <td>12</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Pineapple</td>
            <td>10</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

JS

$('.fruits tr').on('click',function(){
    var fruit = $(this).find('td:first-child').text().trim();
    var price=$(this).find('td:nth-child(2)').text().trim();
    var qty=$(this).find('td:last-child').text().trim();
    alert("Fruit =" + fruit+", Price =" + price +", Qty = "+qty);

    //Can use those values and pass as parameter to your select statement
});