有没有办法让 <td> 在选择按钮时出现并且 <td> 显示为 none？（<td> 中会有一个 codeMirror 文本区域）

Question

我遇到了一些麻烦。我正在开发一个按钮，一旦选择该按钮，将运行一个 JavaScript 函数 - ShowColumn() - 将显示一个 table 列。 table 列首先会被隐藏 - "display:none;" - 但一旦用户选择按钮，隐藏的 table 列将 appear/will 可见。但是，此 table 列将在其中包含一个 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 来完成吗？或者我是否必须将另一种语言合并到系统中才能使隐藏的列可见？任何帮助将不胜感激！谢谢

Answer 1

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

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

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

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

Answer 2

JQuery 有show、hide 和toggle 功能，可以帮助你实现你想要的。最初，table 列使用 class="hide" 隐藏。使用 toggle() 函数可以在按下按钮时 shown/hidden。

Fiddle: 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
幸运的是，几天前我实施了类似的事情，这就是魔术！要获取代码镜像实例，您需要执行以下操作：

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

使用以下代码片段进行按钮点击：

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

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

参考：How to hide/unhide codemirror

有没有办法让 <td> 在选择按钮时出现并且 <td> 显示为 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)

html

javascript

html-table

有没有办法让 <td> 在选择按钮时出现并且 <td> 显示为 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)

html

javascript

html-table

有没有办法让 <td> 在选择按钮时出现并且 <td> 显示为 none？（<td> 中会有一个 codeMirror 文本区域）