我的目标是设计一个程序，它将接受用户输入来创建标题、关键字和一组匹配的描述。一旦用户将它输入到UI并单击generate_html，该节就会消失。然后，应该用用户数据生成与html匹配的单词。

例如，输入页面如下图所示:

单词匹配html如下图所示:

用户输入的代码如下

用户输入:

<center>
  <div class="inputBoxes">
    <table id="tablestyle">
      <td>
        <input id="el1" type="text" value="">
      </td>
      <td>
        <input id="el2" type="text" value="">
      </td>
      <td>
        <input id="el3" type="text" value="">
      </td>
      <td>
        <input id="el4" type="text" value="">
      </td>
      <td>
        <input id="el5" type="text" value="">
      </td>
    </table>
  </div>
</center>

HTML中的结果:

<center>
  <div class="inputBoxes">
    <table id="tablestyle">
      <td>
        <input id="el1" type="text" value="">
      </td>
      <td>
        <input id="el2" type="text" value="">
      </td>
      <td>
        <input id="el3" type="text" value="">
      </td>
      <td>
        <input id="el4" type="text" value="">
      </td>
      <td>
        <input id="el5" type="text" value="">
      </td>
    </table>
  </div>
</center>

描述和单词匹配的代码为

<center>
  <div class="inputBoxes">
    <table id="tablestyle">
      <td>
        <input id="el1" type="text" value="">
      </td>
      <td>
        <input id="el2" type="text" value="">
      </td>
      <td>
        <input id="el3" type="text" value="">
      </td>
      <td>
        <input id="el4" type="text" value="">
      </td>
      <td>
        <input id="el5" type="text" value="">
      </td>
    </table>
  </div>
</center>

generate_html方法如下所示

<center>
  <div class="inputBoxes">
    <table id="tablestyle">
      <td>
        <input id="el1" type="text" value="">
      </td>
      <td>
        <input id="el2" type="text" value="">
      </td>
      <td>
        <input id="el3" type="text" value="">
      </td>
      <td>
        <input id="el4" type="text" value="">
      </td>
      <td>
        <input id="el5" type="text" value="">
      </td>
    </table>
  </div>
</center>

如上所述，我想把它分成两个部分，这样当用户单击generate_html按钮时，这个部分就会转换为匹配HTML的单词。如果有人能提供如何实现这一点的建议，我将不胜感激。谢谢。

顺晟科技：

我认为您的问题本质上是，“如何更改DOM部分在用户输入（例如按下按钮）上的可见性？”最基本的答案是使用CSS可见性属性并通过HTML DOM样式属性.

我已经将您的代码翻译成下面的工作代码段。有关我所做的更改，请查看我的内联注释。几个注意事项:

1. 您没有提供表样式或任何其他样式，因此在代码段中没有样式化。而且，你把桌子摆到了我认为你是指的时候，所以我做了那个改变。使用多个相同的元素总是一个坏主意。
2. 即使表的样式，也很难让它看起来像您的截图。我怀疑您有一些将表与所有es内联的样式，但对我来说这似乎相当笨拙，而且也违反了（新行）V（内联）规则。对于更现代的方法，我建议您熟悉flexbox，您可以非常容易地使用它复制屏幕截图之类的内容。