DEMO

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

使用show（）和hide（）方法动态显示和隐藏列。 $（＆＃39; taxcolumn＆＃39;）。show（）或$（＆＃39; taxcolumn＆＃39;）。hide（），其中taxcolumn是列ID。

Answer 2

尝试：

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

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

2 个答案:

DEMO