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

如何将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'表的列宽度变化的width。

我想表调整宽度时，一些列是隐藏的（它现在这样做），但是当我过滤和有没有结果，我不希望列的宽度改变

plunker

来源

2016-07-25 jonasnas

这里是一个办法做到这一点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="[email protected]"></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>

来源

2016-07-25 17:38:00 kblau

我想表永远是100％的宽度。我只想在没有结果时不改变列的宽度 – jonasnas

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

回答

相关问题