Modification of Table Fields in HTML



  • Good afternoon.

    There are two tables (the table). One is exactly under the other. One line in the top table. In the bottom line. The number of columns in the upper and lower tables is exactly the same.

    Question: How to assign each of the columns of the upper table a width equal to the width of the corresponding lower table column? The puzzle is I'm using Angular. I mean, of course you can go through DOM and try to change it. But at the time the relevant piece of code in the violin starts, Angular's presentation (view) has not yet depicted the data from the model, and the code simply sees an empty table.



  • Use ng-init, it starts after the page is downloaded.

    The next example is for one first column, but the principle is understandable.

    <div ng-controller="syncCollController" ng-init="init()">
    <style>
        td {
            background: lightblue;
        }
    </style>
    {{name}}
    <table>
        <tr>
            <td ng-style="col1Style">head 1</td>
            <td>head 2</td>
            <td>head 3</td>
        </tr>
    </table>
    <table>
        <tr>
            <td id="col1">Row 1 Col 1</td>
            <td>Row 1 Col 2</td>
            <td>Row 1 Col 3</td>
        </tr>
        <tr>
            <td>Row 2 Col 1</td>
            <td>Row 2 Col 2</td>
            <td>Row 2 Col 3</td>
        </tr>
    </table>
    </div>
    

    <script>
    app.controller('syncCollController', ['$scope', function ($scope) {
    $scope.col1Style = { width: "0px" };

    $scope.init = function () {
        var col1 = angular.element(document.querySelector("#col1"));
        $scope.col1Style = { width: col1.prop("clientWidth") + "px" };
    };
    

    }]);
    </script>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2