Question

如何将width应用于table列，以避免在内部未找到任何结果时更改列width。此table中的列也可以动态隐藏，因此我无法在th元素上设置固定宽度。

<table>
      <thead>
        <tr>
          <th>col1</th>
          <th>col2 <i>Filter:</i> <input type="text" ng-model="searchText"></th>
          <th ng-hide="hideCol3">col3 <button ng-click="hideCol3 = !hideCol3">Hide column</button></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="d in data | filter: searchText">
          <td>{{d.col1}}</td>
          <td>{{d.col2}}</td>
          <td ng-hide="hideCol3">{{d.col3}}</td>
        </tr>
      </tbody>
    </table>

表格中的列可能为hidden。因此，例如，如果我转到plunker示例，隐藏col3，并搜索没有现有文字，请说“abc＆＃39;表列宽度的width会发生变化。

我希望表格在隐藏某些列时调整宽度（现在就是这样做），但是当我过滤并且没有结果时我不希望列宽更改

plunker

Answer 1

以下是一种方法https://jsfiddle.net/kblau237/qkn1z0LL/2/

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>NNIndex</title>
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="~/Scripts/app.js"></script>
    <style>
        th, td {
            border: 1px solid black;
        }

        table {
            width: 100%;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //http://stackoverflow.com/questions/1636201/is-the-order-objects-are-return-by-a-jquery-selector-specified
            var cols = $(".manageWidth"); //access each ids with [0]..[2] usejquery each
            $.each(cols, function (index, value) {
               $('<input>').attr({
                   type: 'hidden',
                   class: 'hdnDyn',
                   id: "hdnDyn" + index,
                   value: window.getComputedStyle(cols[index], null).getPropertyValue("width")
               }).appendTo('body');

            });

            $("input").keyup(function () {
                KeepWidthSame();
            });

            $(".col3").click(function () {
                KeepWidthSame();
            });

            function KeepWidthSame() {
                $("table").css("width", "auto");
                var cols = $(".manageWidth");
                $.each(cols, function (index, value) {
                    $(this).css("width", $(".hdnDyn")[index].value);
                });
            }
        })

    </script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
    <table>
        <thead>
            <tr>
                <th class="manageWidth">col1</th>
                <th class="manageWidth">col2 <i>Filter:</i> <input type="text" ng-model="searchText"></th>
                <th class="manageWidth col3" ng-hide="hideCol3">col3 <button ng-click="hideCol3 = !hideCol3">Hide column</button></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="d in data | filter: searchText">
                <td>{{d.col1}}</td>
                <td>{{d.col2}}</td>
                <td ng-hide="hideCol3">{{d.col3}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

固定表格中的列宽，可以搜索和隐藏列

1 个答案: