JS_DocumentUpdate

最新推荐文章于 2025-07-25 17:24:07 发布

zero2100

最新推荐文章于 2025-07-25 17:24:07 发布

阅读量45

点赞数

文章标签： javascript

本文描述了一个HTML和JavaScript代码示例，用于创建一个带有文本输入、下拉字体选择、加粗/斜体选项和提交按钮的动态表格。用户输入会根据选择的字体和格式化选项更新表格内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这段代码首先是由chatGPT于2023年2月8日创建的（使用chatGPT 3.5），然后由我稍作修改。我最初向chatGPT提出的请求如下：

编写一个具有以下要求的JavaScript和HTML：

1. 创建一个具有三行一列的表格，位于页面的中间。表格的宽度为600像素。表格应显示网格线。

2. 第一行的单元格为空。

3. 在表格中放置一个文本字段，宽度与表格相同，高度为10行。默认文本为"Type in any text here and hit [Submit] button"。

4. 放置一个下拉框、两个复选框和一个按钮。所有内容应在一行中对齐。

5. 在下拉框中填充5个常用的HTML字体。

6. 第一个复选框用于选择加粗和正常字体。

7. 第二个复选框用于选择斜体和正常字体。

8. 按钮用于提交文本字段中的文本。

9. 当点击按钮时，将文本字段中的文本附加到表格的第一行，并使用下拉框选择的字体、加粗和斜体复选框。

10. 将HTML和JavaScript写在不同的文件中。

11. 分别定义所有的回调函数，并通过addEventListener进行调用。

注意：无法保证您得到的代码与我获得的代码相同，因为chatGPT根据上下文以不同的方式生成答案。即使是相同的问题，每次询问时它也可能产生不同的答案。

注意：如果您对该请求没有任何自己的想法，请将我的请求复制并粘贴到chatGPT中，并根据先前请求的输出添加其他请求。我建议在chatGPT中创建一个新线程，放置我的请求，然后继续添加您自己的请求。

Document_UpdateTable.html

<html>

  <head>



    <style>

      #text-field {

        width: 600px;

        height: 10em;

        text-align: center;

      }

      #controls {

        display: flex;

        justify-content: center;

      }

    </style>



  </head>

  <body>

    <table style="border: thin solid black;">

      <tr>

        <td id="output"></td>

      </tr>

      <tr>

        <td>

          <textarea id="text-field">Type in any text here and hit [Submit] button</textarea>

        </td>

      </tr>

      <tr id="controls">

        <td>

          <select id="font-select">

            <option value="Arial">Arial</option>

            <option value="Helvetica">Helvetica</option>

            <option value="Times New Roman">Times New Roman</option>

            <option value="Courier New">Courier New</option>

            <option value="Verdana">Verdana</option>

          </select>

          <input type="checkbox" id="bold-checkbox">Bold</input>

          <input type="checkbox" id="italic-checkbox">Italic</input>

          <button id="submit-button">Submit</button>

        </td>

      </tr>

    </table>

    <script src="Document_Update.js"></script>

  </body>

</html>