Question

我有一个包含表格的部分。我希望在单击该表中的某个元素时隐藏该表，并在不重新加载页面的情况下显示该表中的另一个表。我还要显示一个后退按钮，以便我可以返回到初始部分。感谢

<section class="tabs" id="content3">
      <table class="rwd-table">
<tr>
  <th>Livre</th>
  <th>Article de journal</th>
  <th>Chapitre de livre</th>
  <th>Conférence avec actes</th>
</tr>
<tr>
  <td data-th="Livre"> <a href ="#">2008</a></td>
  <td data-th="Article de journal">CESACO 2012-2015</td>
  <td data-th="Chapitre de livre">M-Trace 2010-2013</td>
  <td data-th="Conférence avec actes">M-Trace 2010-2013</td>
</tr>
<tr>
  <td data-th="Livre">RSE 2010-2013</td>
  <td data-th="Article de journal">CESACO 2012-2015</td>
  <td data-th="Chapitre de livre">M-Trace 2010-2013</td>
  <td data-th="Conférence avec actes">M-Trace 2010-2013</td>
</tr>

Answer 1

如果您对问题不清楚，我们无法给出明确的答案。只需使用hide（）隐藏点击的表格。使用show（）显示必须显示的表/按钮。

$('#table1').on('click', function(){
$(this).hide();
$('#table2').show();
$('#backbutton').show();
});

Answer 2

给出的是一个满足您要求的示例代码。这是通过angularjs完成的。

请根据您的需要进行更新。

视图

<button ng-click="back()">Back</button>

<table id="tableId" border="1" ng-show="table1">
    <thead>
        <tr>
            <th>
                Table 1
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <button ng-click="selectElement()">Element</button>
            </td>
        </tr>
    </tbody>
</table>

<table id="tableId" border="1" ng-show="table2">
    <thead>
        <tr>
            <th>
                Table 2
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                column
            </td>
        </tr>
    </tbody>
</table>

js控制器

function MainController($scope) {
  $scope.table1 = true;
  $scope.table2 = false;

  $scope.selectElement = function(){
         $scope.table1 = false;
     $scope.table2 = true;
    };

   $scope.back = function(){
         $scope.table1 = true;
     $scope.table2 = false;
    };
}

使用后退按钮隐藏和显示同一部分中的另一个表

2 个答案: