Question

我有一个非常简单的html表，我想为每一行添加很多信息，但是当页面加载时我无法显示所有内容，因为它会使一切都非常笨拙。所以我想在每一行的另一列中添加一个视图更多按钮。

我已经尝试过编写JavaScript代码，但它不能正常工作。我想要的是：

该行应该是完全不可见的，直到我点击更多的视图（我尝试将标记放在div中，但它通过将行完全放在表格之外来搞乱一切）。
我希望代码适用于所有行，因此我不必为每一行编写单独的代码。
每当我尝试查看另一行的更多内容时，我希望行的扩展信息不可见。
如果可能的话，我想要一个简单的动画来展示扩展动画。

以下是我的HTML代码：

return {
    restrict: 'A',
    replace: true,
    template:'<div> <li ng-if="state.includes('root.child1')">Child 1 Menu</li>
              <li ng-if="state.includes('root.child2')">Child 2 Menu</li>
              <li ng-if="state.includes('root.child3')">Child 3 Menu</li>     
              </div>'
    link: function(scope, element, attrs) {

        $scope.state = scope.$state; // Scope from Main Controller

        $rootScope.$on('$stateChangeSuccess', function() {
            $scope.state = scope.$state; // scope.$state is added in main controller 
        });
    }
}

以下是我的CSS：

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="example" class="more">
                <p>John Doe is a man</p>
                <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
            </div>
        </td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="example" class="more">
                <p>Jane Doe is a woman</p>
                <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
            </div>
        </td>
    </tr>
</table>

以下是我的Javascript：

<style type="text/css">
   .more {
      display: none;
   }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; 
   }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left;
   }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; 
   }
</style>

Answer 1

由于你标记了jQuery，我假设你愿意使用它，所以这里是一个用jQuery修复的例子：

编辑：html已更改，由于ID选择器，第二行无法正常工作

<强> HTML

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td><a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="example" class="more">
                <p>John Doe is a man</p>
                <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
            </div>
        </td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
        <td><a href="#" id="example-show" class="showLink" onclick="showHide('exampleFemale');return false;" class="btn bN-btn-base bN-btn-small">View More</a></td><!-- Note the change in the showHide() function -->
    </tr>
    <tr>
        <td colspan="3">
        <div id="exampleFemale" class="more"><!-- Note the change in the ID -->
                <p>Jane Doe is a woman</p>
                <p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('exampleFemale');return false;">Hide this content.</a></p><!-- Note the change in the showHide() function -->
            </div>
        </td>
    </tr>
</table>

<强>的Javascript

function showHide(shID) {
    if ($('#' + shID)) {
      if ($('#' + shID+'-show').css('display') != 'none') {
       $('#' + shID+'-show').css({'display':'none'});
       $('#' + shID).css({'display':'block'});
      }
   }
   else {
       $('#' + shID+'-show').css({'display':'inline'});
       $('#' + shID).css({'display':'none'});
   }
}

注意Javascript中的更改 - ＆gt;曾经document.getElementById(shID+'-show')的jQuery现在是$('#' + shID+'-show')，而以前曾是.style.display = 'none';的jQuery现在是.css({'display':'none'});

不要忘记包含jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

希望这有帮助！

使用＆＃39;查看更多＆＃39;按钮以增强每个表行的信息

1 个答案: