javascript - 动态添加删除td单元格jquery

Question

我有一个 mustache 模板，渲染如下:

<script id="myTemplate" type="text/x-template">
<tr data-name="{{name}}">
    <td>
    <select id="titlesDropDown" name="SelectedTitleId"><option value="">--Select Title--</option>
    <option value="1">Mr</option>
    <option value="2">Miss</option>
    <option value="3">Mrs/Corporate</option>
    <option value="4">Dr</option>
    <option value="5">Other</option>
    </select>
    </td>
    <td class='hidden'><input type="text" name="Other" value=""/></td>
    <td>{{name}}</td>
    <td><input type="text" name="Age" value=""/></td>
      <td>
                <button type="button" class="removeRowBtn">
                    Remove Row
                </button>
            </td>
</tr>
</script>

您可以看到“其他”输入字段的 td 已隐藏。可以向表中添加多行，以便将多个人添加到我的数据库中。仅当下拉列表中选择“其他”字段时，我才需要显示此“其他 TD”。但是，使用删除按钮，我发现其他单元格被隐藏，删除按钮会呈现在具有其他标题表标题的单元格中。然后，如果用户选择其他类，则应该删除该类，这将留下相当“跳跃的行为”。有没有更好的方法来实现这一目标？

我还发现删除和显示其他输入文本框的功能不太有效。我目前执行此操作的 js 如下:

$(document).on('change', '#titlesDropDown', function () {
    //var selectedValue = $("#titlesDropDownn option:selected").text();
 // not selecting correctly if there are multiple rows in the table   
var selectedValue = $('#titlesDropDown').closest('select').find(':selected').html();

    // if else not quite working to show hide that Other td cell
    if (selectedValue == 'Other') {
        $(this).closest('td').next('td').find('input').show(); 
    } else {
        $(this).closest('td').next('td').find('input').hide();
    }
});

Answer 1

您有class="hidden"关于<td>而不是 <input> ，但您隐藏并显示 <input> 。您想要隐藏/显示 <input> ，而不是 <td> ，所以移动class="hidden"到<input> 。这仍然没有完全解决“跳跃”行为。

而不是隐藏和显示 <input> ，您可以更改其 visibility风格。这样您可以隐藏它，但它仍然会占用相同的空间。

HTML:

<td>
    <input type="text" name="Other" value="" style="visibility: hidden;" />
</td>

JavaScript:

if (selectedValue == 'Other') {
    $(this).closest('td').next('td').find('input').css({ visibility: 'visible' }); 
} else {
    $(this).closest('td').next('td').find('input').css({ visibility: 'hidden' });
}

当然，您也可以在<td>上设置最小宽度。因此，即使 <input> 也会占据相同的空间。被隐藏。这是一个jsfiddle使用 <input> 可以做到这一点同样<td>作为下拉菜单。

禁用/启用，而不是隐藏/显示，将是另一种选择。

还有一件事，如果您有多行带有 <select>元素，你不应该给它 id值，因为多个元素将具有相同的 id 。使用class而不是id .