选择按钮时，可扩展 <td> 中的 codeMirror 似乎没有 disappear/appear

Question

我正在尝试开发这个系统，您可以在其中使用 CodeMirror 文本区域编辑代码，然后代码会自动运行在 iframe 中。

在这个系统上会有一个按钮，可以让用户使 CSS 文本区域和 table 列消失。但出于某种原因，我无法让它工作。这是我到目前为止得到的代码，如下所示：

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




 <table id="sample2" width="100%" height="500px" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
   <tr>
               <td colspan="3"><button onClick="displayCSS()">Hide/Show CSS</button></td>
            <tr>
   <tr>
    <td class="left">
    
    <textarea id="code" name="code" style="padding-top:0px; border:none;" ><!DOCTYPE html>
<html>
 <head>
      
 </head>
 <body>
     
 </body>
</html>
</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("code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "htmlmixed",
    lineWrapping: true,
    theme: 'default',
  });
</script>
    
    </td>
    
    <td>1</td><td></td>
    
 



 <td class="left" id="Column" class="hidden" style="position:relative; left:17px;">
    
    <textarea id="code2" name="code2" style="padding-top:0px; border:none; padding-left:300px;" >h2 {
    visibility: hidden;
}

h2 {
    visibility: hidden;
}

h2 {
    visibility: hidden;
}

h2 {
    visibility: hidden;
}
</textarea> 
 <select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
  <option value="volvo">main.css</option>
  <option value="saab">main2.css</option>
  <option value="mercedes">main3.css</option>
  <option value="audi">other.css</option>
</select>
<script> 
  var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/css",
    lineWrapping: true,
    theme: 'default',
  });
</script>
    
    </td>
 
 
 
 
 
 
 
 
 
 
 
 
 
   
  
<td class="right" style="border-collapse: collapse; padding:none; margin:none; border:none;">

<iframe src="http://duckduckgo.com" style="width:99%; height:100%; border:none; margin-left:13px;"></iframe>
   




</td>



</tr>
                   
</table>

我仍然需要让代码在 iFrame 中自动执行，但现在我只希望用户能够让 css 文本区域消失和出现。任何帮助将不胜感激 - 谢谢 :)

Answer 1

我注意到有三个错误。 displayCSS 函数根本没有定义。您需要包括 jQuery。并且按钮周围的 tr 没有正确关闭。

修改后的代码如下：

<script src="jquery.min.js"></script>
<script src="codemirror.js"></script>
<link href="../css/codemirror.css" rel="stylesheet" type="text/css" />
<script src="htmlmixed/htmlmixed.js"></script>
<script src="xml.js"><!-- needed for htmlmixed --></script>
<script src="css.js"></script>

<style>
    .CodeMirror {
        border:none;
        width:100%;
        height:451px;
        margin-left:100;
    }
</style>




 <table id="sample2" width="100%" height="500px" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
            <tr>
               <td colspan="3"><button onclick="displayCSS()">Hide/Show CSS</button></td>
            </tr>
            <tr>
            <td class="left">
                <textarea id="code" name="code" style="padding-top:0px; border:none;" >
                    <!DOCTYPE html>
                    <html>
                        <head>

                        </head>
                        <body>

                        </body>
                    </html>
                </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 editor1 = CodeMirror.fromTextArea(document.getElementById("code"), {
                    lineNumbers: true,
                    matchBrackets: true,
                    mode: "htmlmixed",
                    lineWrapping: true,
                    theme: 'default',
                  });
                </script>   
            </td>

    <td class="left" id="Column" class="hidden" style="position:relative; left:17px;">
         <textarea id="code2" name="code2" style="padding-top:0px; border:none; padding-left:300px;" >
            h2 
            {
                visibility: hidden;
            }

            h2 
            {
                visibility: hidden;
            }

            h2 
            {
                visibility: hidden;
            }

            h2 
            {
                visibility: hidden;
            }
         </textarea> 
         <select style="height:46px; width:100%; margin:0px; position:relative; left:0%;">
          <option value="volvo">main.css</option>
          <option value="saab">main2.css</option>
          <option value="mercedes">main3.css</option>
          <option value="audi">other.css</option>
        </select>
        <script> 
          var editor2 = CodeMirror.fromTextArea(document.getElementById("code2"), {
            lineNumbers: true,
            matchBrackets: true,
            mode: "text/css",
            lineWrapping: true,
            theme: 'default',
          });
        </script>
    </td>               
    <td class="right" style="border-collapse: collapse; padding:none; margin:none; border:none;">
        <iframe src="http://duckduckgo.com" style="width:99%; height:100%; border:none; margin-left:13px;"></iframe>
    </td>
</tr>

</table>

<script>
function displayCSS()
{
    var cm = $('.CodeMirror')[1].CodeMirror;
    $(cm.getWrapperElement()).toggle();
}
</script>

编辑

http://jsfiddle.net/aLwjhp1w/1/

选择按钮时，可扩展 <td> 中的 codeMirror 似乎没有 disappear/appear

codeMirror within an extendable <td> doesn't seem to disappear/appear when a button is selected

html

javascript

html-table

codemirror