Question

我制作了一张桌子，在左边有问题，在右边有答案。默认情况下，这些答案是隐藏的。如果用户按下按钮，则会显示出来。

我已经找到了这段代码并对其进行了相当多的修改，但是仍然缺少的是在显示和隐藏之间切换的单个按钮。我不喜欢有两个单独的按钮。

由于我希望一开始就隐藏答案，所以我用showHideColumn(1, false);调用了该函数。这是正确的还是有更好的方法呢？曾经有什么其他事情可以优化代码吗？（我是编程新手）

谢谢。

<table id='idTable'>
  <tr><td> Questions 1</td><td> Answer 1</td></tr>
  <tr><td> Questions 2</td><td> Answer 2</td></tr>
  <tr><td> Questions 3</td><td> Answer 3</td></tr>
  <tr><td> Questions 4</td><td> Answer 4</td></tr>
  <tr><td> Questions 5</td><td> Answer 5</td></tr>
</table>
<input type='button' onClick='javascript:showHideColumn(1, true);' value='show'>
<input type='button' onClick='javascript:showHideColumn(1, false);' value='hide'>

<script>
  showHideColumn(1, false);

  function showHideColumn(colNo, doShow) {
    var rows = document.getElementById('idTable').rows;

    for (var row = 0; row < rows.length; row++) {
      var cols = rows[row].cells;
      if (colNo >= 1 && colNo < cols.length) {
        cols[colNo].style.display = doShow ? '' : 'none';
      }
    }
  }
</script>

Answer 1

您可以使用单个按钮并使用“ innerHTML”按如下所示更改其文本：

<script type="text/javascript">
var button = document.querySelector('#button');
button.addEventListener('click', function (event) {
      if (button.innerHTML == "Hide") {
     //Add Code to Hide Columns
     button.innerHTML = "Show";
      } else {
    //Add Code to Show Columns
          button.innerHTML = "Hide";
      }
    }
  );
</script>

Answer 2

首先设置全局function setDateMode() { $scope.selection.date.mode === "c" ? clickCustomInput() : dateSelected(); }并使用当前按钮值更改每次单击var doShow和true的布尔值

false

删除第二个按钮。

if( doShow ){
    doShow = false;
    e.value = 'show';
}else{
    e.value = 'hide';
    doShow = true;
}

并更新您的自定义功能婴儿车，例如<table id='idTable'> <tr> <td> Questions 1</td> <td> Answer 1</td> </tr> <tr> <td> Questions 2</td> <td> Answer 2</td> </tr> <tr> <td> Questions 3</td> <td> Answer 3</td> </tr> <tr> <td> Questions 4</td> <td> Answer 4</td> </tr> <tr> <td> Questions 5</td> <td> Answer 5</td> </tr> </table> <input type='button' onClick='javascript:showHideColumn(this, 1);' value='show'>和showHideColumn(this, 1)

showHideColumn(null, 1)

创建一个显示/隐藏按钮来切换表格列

2 个答案: