javascript - 使用 jQuery 动态添加和删除表列

Question

我使用表格作为发票表单，并希望动态添加/删除含税的列。

我的选择框:

<select id="tax" class="form-control tax" onchange="SetTax();">
<option value="tax-none" selected="selected">No</option>    
<option value="1 Tax">1 Tax</option>
<option value="2 Taxes" selected="selected">2 Taxes</option>
</select>

我的表格中的税收列(id:#table-document)

<th><textarea type="text" class="header-inputs tax1-header" data-i18n="table.tax" style="overflow: hidden; word-wrap: break-word; resize: none; height: 38px;">Tax</textarea></th>

<td class="tax1-column">
    <input data-key="tax1" class="table-inputs tax1-row" autocomplete="off" value="0%">
</td>

<th><textarea type="text" class="header-inputs tax2-header" data-i18n="table.tax" style="overflow: hidden; word-wrap: break-word; resize: none; height: 38px;">Tax</textarea></th>

<td class="tax2-column">
    <input data-key="tax2" class="table-inputs tax2-row" autocomplete="off" value="0%">
</td>

在我的表格(#table-document，包含 thead、tbody 和 tfoot)中，税收列的位置是第 5 和第 6。

现在我正在寻找一种添加/删除列的方法，具体取决于我的选择框的值。

实际上，我使用了一个大约40行的jQuery函数，但仍然不起作用。有什么有效的方法可以做到这一点吗？

Answer 1

尝试:

jQuery:

$('#tax').change(function() {

    var $first = $('table').find('tr').find('td:nth-child(5)'),
        $second = $('table').find('tr').find('td:nth-child(6)'),
        $v = $(this).val();

    $first.hide();
    $second.hide();

    if ($v == 'tax-one') $first.show();
    else if ($v == 'tax-two') $second.show();
});

HTML:

<select id="tax" class="form-control tax">
    <option value="tax-none" selected="selected">No</option>    
    <option value="tax-one">1 Tax</option>
    <option value="tax-two">2 Taxes</option>
</select>

<hr />

<table>
<tbody>
    <tr><td></td><td></td><td></td><td></td><td>Tax 1</td><td>Tax 2</td></tr>    
    <tr><td></td><td></td><td></td><td></td><td>Tax 1</td><td>Tax 2</td></tr>    
    <tr><td></td><td></td><td></td><td></td><td>Tax 1</td><td>Tax 2</td></tr>    
    <tr><td></td><td></td><td></td><td></td><td>Tax 1</td><td>Tax 2</td></tr>    
    <tr><td></td><td></td><td></td><td></td><td>Tax 1</td><td>Tax 2</td></tr>        
    </tbody>
</table>

DEMO