Question

我有以下表格视图

我想隐藏那个表格的红色方形区域。由于我在进一步的操作中使用此数据，我想隐藏不删除它。该表的标记是：

var DigitsManager = require("react-native").NativeModules.DigitsManager;

DigitsManager.launchAuthentication((loginResponse) => {
    Log.debug("[Digits]", "login successful", loginResponse);
}, (error) => {
    Log.warn("[Digits]", "Login failed", error);
});

这是用于将数据填充到该表列

的javascript片段

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

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

你在使用bootstrap吗？如果是，请将“隐藏”类添加到要隐藏的和 td 标记中。

如何在ASP MVC中隐藏表列

2 个答案: