如何在 ASP MVC 中隐藏表格列

Question

我有以下表格视图

我想从那张桌子上隐藏那个红色正方形区域。由于我在进一步的操作中使用这些数据，我想隐藏而不是删除它。表格的标记是：

<table class="table">
            <thead>
                <tr>
                    <th>Property_ID</th>
                    <th>IsChecked</th>
                    <th>Property Tile</th>
                    <th>Property Value</th>
                </tr>
            </thead>
            <tbody id="table"></tbody>
        </table>


        <table id="template" class="table" style="display: none;">
            <tr>
                <td>
                    <span></span>
                    <input type="hidden" name="[#].Property_ID" />
                </td>
                <td>
                    <input type="checkbox" name="[#].IsChecked" value="true" />
                    <input type="hidden" name="[#].IsChecked" value="false" />
                </td>
                <td>
                    <span></span>
                    <input type="hidden" name="[#].Property_Title" />
                </td>
                <td>
                    <span></span>
                    <input type="hidden" name="[#].Property_Value" />
                </td>
            </tr>
        </table>

这是 javascript sn-p 将数据填充到该表列

  <script type="text/javascript">   

                var type = $('#Type');
                var category = $('#Category');
                var country = $('#Country');
                var product = $('#Product');
                var table = $('#table');

                $('#search').click(function () {

                    var url = '@Url.Action("FetchProductProperties")';
                    table.empty();
                    $.getJSON(url, { type: type.val(), category: category.val(), country: country.val(), product: product.val() }, function (data) {
                        $.each(data, function (index, item) {
                            var clone = $('#template').clone();
                            clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
                            var cells = clone.find('td');
                            cells.eq(0).children('span').text(item.ID);
                            cells.eq(0).children('input').val(item.ID);
                            cells.eq(1).children('input').first().prop('checked', item.CheckOrNot)
                            cells.eq(2).children('span').text(item.Name);
                            cells.eq(2).children('input').val(item.Name);
                            cells.eq(3).children('span').text(item.PropertyValue);
                            cells.eq(3).children('input').val(item.PropertyValue);
                            $('#table').append(clone.find('tr'));
                        });
                    });
                });
  </script>

Answer 1

假设您想通过 javascript 动态隐藏该列，然后向该 <td> 元素添加一个类：

<table id="template" class="table" style="display: none;">
        <tr>
            <td>
                <span></span>
                <input type="hidden" name="[#].Property_ID" />
            </td>
            <td>
                <input type="checkbox" name="[#].IsChecked" value="true" />
                <input type="hidden" name="[#].IsChecked" value="false" />
            </td>
            <td>
                <span></span>
                <input type="hidden" name="[#].Property_Title" />
            </td>
            <td class="columnToHide">
                <span></span>
                <input type="hidden" name="[#].Property_Value" />
            </td>
        </tr>
    </table>

然后，您可以在填充搜索结果后从 javascript 调用 $('.columnToHide').hide();：

 $('#search').click(function () {

                var url = '@Url.Action("FetchProductProperties")';
                table.empty();
                $.getJSON(url, { type: type.val(), category: category.val(), country: country.val(), product: product.val() }, function (data) {
                    $.each(data, function (index, item) {
                        var clone = $('#template').clone();
                        clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
                        var cells = clone.find('td');
                        cells.eq(0).children('span').text(item.ID);
                        cells.eq(0).children('input').val(item.ID);
                        cells.eq(1).children('input').first().prop('checked', item.CheckOrNot)
                        cells.eq(2).children('span').text(item.Name);
                        cells.eq(2).children('input').val(item.Name);
                        cells.eq(3).children('span').text(item.PropertyValue);
                        cells.eq(3).children('input').val(item.PropertyValue);
                        $('#table').append(clone.find('tr'));
                    });
                });

                $('.columnToHide').hide();
            });

您可以随时在脚本中使用$('.columnToHide').show(); 来显示该列。

Answer 2

你在使用引导程序吗？如果是，请将“隐藏”类添加到您要隐藏的 th 和 td 标记。