Is there a way to make a <td> appear when a button is selected and the <td> display is none? （<td> 里面会有一个 codeMirror 文本区域）答案

【问题标题】：Is there a way to make a <td> appear when a button is selected and the <td> display is none? (The <td> will have a codeMirror text area in it)Is there a way to make a <td> appear when a button is selected and the <td> display is none? （<td> 里面会有一个 codeMirror 文本区域）
【发布时间】：2015-10-26 23:20:45
【问题描述】：

我在这里遇到了一些麻烦。我正在开发一个按钮，一旦选择该按钮，它将运行一个 JavaScript 函数 - ShowColumn() - 这将使一个表格列出现。表格列首先会被隐藏 - “display:none;” - 但是一旦用户选择按钮，隐藏的表格列就会出现/可见。但是，此表列中将有一个 codeMirror 文本区域。这可以做到吗？如果是这样，有人可以帮忙吗？谢谢:)

我已经包含了我到目前为止所做的事情，如下：

<head>

<style>
	
.hidden {
   display: none;
}

.visible {
   display: block;
}
	
</style>
	
<script>
	
function ShowColumn() { 
   document.getElementById("Column").className = "visible";
}
	
</script>

<script src="lib/codemirror.js"></script>
<script src="mode/clike/clike.js" type="text/javascript"></script>
<link href="lib/codemirror.css" rel="stylesheet" type="text/css" />
<script src="mode/htmlmixed/htmlmixed.js"></script>
<script src="mode/xml/xml.js"><!-- needed for htmlmixed --></script>
<script src="mode/css/css.js"></script>
<link href="theme/default.css" rel="stylesheet" type="text/css" />
<link href="theme/mdn-like.css" rel="stylesheet" type="text/css" />

<style>
    .CodeMirror {
        border:none;
        width:100%;
        height:451px;
        margin-left:100;
    }
</style>
</head>
<body>
<button onClick="ShowColumn()">Click me</button>
<table>
<tr>
<td>

	<textarea id="code2" name="code2" style="padding-top:0px; border:none; padding-left:300px;" >
        some css code will be here....
    <textarea>
 
<select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
  <option value="volvo">index.html</option>
  <option value="saab">another_page.html</option>
  <option value="mercedes">placeholder_page.html</option>
  <option value="audi">other.html</option>
</select>
<script> 
  var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/css",
    lineWrapping: true,
    theme: 'default',
  });
</script>


</td>
<td id="Column" class="hidden">

  <textarea id="code2" name="code2" style="padding-top:0px; border:none; padding-left:300px;" > 
    some css code will be here....
  </textarea> 

   <select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
  <option value="volvo">index.html</option>
  <option value="saab">another_page.html</option>
  <option value="mercedes">placeholder_page.html</option>
  <option value="audi">other.html</option>
</select>
<script> 
  var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/css",
    lineWrapping: true,
    theme: 'default',
  });
</script>

</td>
<td>


	<iframe src="" style="height:550px; width:100%;"></iframe>


</td>
</tr>

</table>

</body>

我做了很多研究，但我没有想出任何解决我问题的方法。这可以单独使用 JavaScript 和 HTML 完成吗？还是我必须将另一种语言合并到系统中才能使隐藏列可见？任何帮助将不胜感激！谢谢

【问题讨论】：

jQuery .show() 和 .hide() 效果很好，但我不知道为什么你有什么不起作用？
这就是 jQuery、CSS 和 DOM 操作的诞生。
您好，感谢您的快速响应:) 什么是 DOM 操作？你能告诉我如何将它合并到我的代码中吗？谢谢大家的帮助！
感谢@godmode，每当我使用 jQuery .show() 和/或 .hide() 时，表格列中的内容都会被隐藏，而不是实际的表格列本身。有什么建议？谢谢
jsfiddle.net/85yL2gx6

标签： javascript html html-table

【解决方案1】：

使用 JQuery 管理样式并编写这种代码更容易：

$('#hiddenColumn').show();
$('#hiddenColumn').hide();

不要忘记隐藏第二列中的所有单元格。

你可以在这里看到一个例子： https://jsfiddle.net/0rn3oq51/

【讨论】：

感谢@MartinDonies 的回复，我想知道您是否可以将您的编码魔法付诸实践，以帮助我为上面的新（已编辑）问题找到新答案。感谢您的帮助

【解决方案2】：

JQuery 有函数show、hide 和toggle 可以帮助你实现你想要的。最初，使用class="hide" 隐藏表格列。使用toggle() 函数可以在按下按钮时显示/隐藏它。

小提琴：https://jsfiddle.net/85yL2gx6/3/

<body>
  <button onclick="ShowTable()">Display Table</button>
  <button onclick="ShowColumn()">Display Column</button>

  <table id="hiddenTable" class='show'>
    <tr>
       <td>
         <textarea>Write something here....</textarea>
       </td>
      <td id="hiddenColumn" class='hide'>
         <textarea>Write something here....</textarea>
       </td>
    </tr>
  </table>

  <script type="text/Javascript">
    function ShowColumn()
    {  
      $("#hiddenColumn").toggle();
    }
      
    function ShowTable()
    {
      $("#hiddenTable").toggle();
    }
  </script>
</body>

编辑 - Codemirror
幸运的是，几天前我实施了类似的事情，这就是魔术！要获取 codemirror 实例，您需要执行以下操作：

var cm = $('.CodeMirror')[0].CodeMirror;

使用以下 sn-p 进行按钮点击：

var cm = $('.CodeMirror')[0].CodeMirror;

// Hide
$(cm.getWrapperElement()).hide();
    
// Show
$(cm.getWrapperElement()).show();

参考：How to hide/unhide codemirror

【讨论】：