javascript - 如何在 ASP MVC 中隐藏表列

Question

我有下 TableView

我想隐藏那个表格中的红色方 block 区域。因为我在进一步的操作中使用这些数据，所以我想隐藏而不是删除它。表格的标记是:

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

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

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

 $('#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(); 显示列在你的脚本中。