Javascript 创建显示/隐藏按钮以切换表列

我做了一张桌子，左边有问题，右边有答案。默认情况下，这些答案是隐藏的。如果用户按下按钮，它们就会出现

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

因为我想在开始时隐藏答案，所以我用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>

问题1答案1
问题2答案2
问题3答案3
问题4答案4
问题5答案5
showHideColumn（1，假）；
函数showHideColumn（colNo、doShow）{
var rows=document.getElementById（'idTable'）.rows；
对于（变量行=0；行=1&&colNo

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

var button=document.querySelector（“#button”）；
按钮。addEventListener（'click'，函数（事件）{
如果（button.innerHTML==“隐藏”）{
//添加代码以隐藏列
button.innerHTML=“显示”；
}否则{
//添加代码以显示列
button.innerHTML=“隐藏”；
}
}
);

首先设置全局

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'> 

请看一下：

<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'> 

<script>
showHideColumn(null, 1);

var doShow;

function showHideColumn(e, colNo) {
    if (e != null) {
        if (doShow) {
            doShow = false;
            e.value = 'show';
        } else {
            e.value = 'hide';
            doShow = true;
        }
    }
    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>