Question

我有一个表，其中包含一些字段，例如Service，amount，tax，action，我只想如果我在该行的复选框中打钩，我希望将表服务数据（例如Subscription Charge）添加到输入中以及何时我在另一行复选框上打勾，该表数据也应在输入中添加逗号，如订阅费，注册费，同时取消选中该行复选框时，该表数据如订阅费，注册费也应在输入中删除

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Service </th>
            <th scope="col">Amount</th>
            <th scope="col">tax</th>
            <th scope="col">Action</th>
        </tr>
        <tr>
            <td>
                <span>Subscription Charges</span>
            </td>
            <td>
                <span>500.00</span>
            </td>
            <td>
                <span>90.00</span>
            </td>
            <td>
                <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" /> 
            </td>
        </tr>
        <tr>
            <td>
                <span>registration fees</span>
            </td>
            <td>
                <span>200.00</span>
            </td>
            <td>
                <span>80.00</span>
            </td>
            <td>
                <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" /> 
            </td>
        </tr>
    </tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Service </th>
            <th scope="col">Amount</th>
            <th scope="col">tax</th>
            <th scope="col">Action</th>
        </tr>
    </tbody>    
</table>

<input type="text" name="services">

Answer 1

使用jQuery的一种方法是，首先确保我们注意到复选框是否已更改，然后转到父行，并找到第一个TD，其中应该包含您要删除的内容。之后，获取“目标”元素（即底部的输入框）并设置其值。

$("input[type=checkbox]").on("change", function() {
var value = $(this).parent().parent().find("td:first-child").text();
        var target = $("input[name=services]");
        
        target.val(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Service </th>
            <th scope="col">Amount</th>
            <th scope="col">tax</th>
            <th scope="col">Action</th>
        </tr>
        <tr>
            <td>
                <span>Subscription Charges</span>
            </td>
            <td>
                <span>500.00</span>
            </td>
            <td>
                <span>90.00</span>
            </td>
            <td>
                <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" /> 
            </td>
        </tr>
        <tr>
            <td>
                <span>registration fees</span>
            </td>
            <td>
                <span>200.00</span>
            </td>
            <td>
                <span>80.00</span>
            </td>
            <td>
                <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" /> 
            </td>
        </tr>
    </tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Service </th>
            <th scope="col">Amount</th>
            <th scope="col">tax</th>
            <th scope="col">Action</th>
        </tr>
    </tbody>    
</table>

<input type="text" name="services">

当我选中同一行中的复选框时，如何获取输入中的表行数据？

1 个答案: