按钮添加将生成新的Textarea

时间:2018-03-15 00:43:29

标签: javascript jquery

是否有可能的按钮"添加"会在表单中生成新的textarea吗?我一整天都在搜索但是找不到任何逻辑可以做到"添加"生成新textarea的函数。



h1,h2,h3,h4,h5,p,table {font-family: Calibri;}
.content {
  margin: 0 auto;
  width: 75%;
  margin-top: 15px;
}
table.addbutton {
  border: solid black 1px;
  width: 100%;
  height: auto;
}
td,th,tr {
  border: solid black 1px;
  text-align: center;
}
textarea {
  width: 100%;
  margin: 0;
  overflow: hidden
}

<div class="content">
  <table class="addbutton">

    <form action="" method="post">

      <!-- Title -->
      <tr style="color:White;">
        <th bgcolor="#82BBE8">Fixed Title A</th>
        <th bgcolor="#82BBE8">Fixed Title B</th>
        <th bgcolor="#82BBE8">Fixed Title C</th>
        <th bgcolor="black">Fixed Title D</th>
        <th bgcolor="#82BBE8">Fixed Title E</th>
        <th bgcolor="black">Fixed Title F</th>
        <th bgcolor="#82BBE8">Fixed Title G</th>
      </tr>
      <!-- Title end -->

      <tr style="color:White;">

        <td rowspan="2" width="auto" bgcolor="#82BBE8">Title Example</td>

        <td style="color:Black">
          <p align="right"><input type="button" alt="AddColumn" value="Add"></p>
          <br>
          <h5>When we click "Add" button will show new textarea</h5>
          <textarea placeholder="Please input text here.."></textarea>
        </td>

        <td style="color:Black">
          Example 1
        </td>

        <td style="color:Black">
          Example 2
        </td>

        <td style="color:Black">
          Example 3
        </td>

        <td style="color:Black">
          Example 4
        </td>

        <td style="color:Black">
          Example 5
        </td>

      </tr>

      <tr>
        <td>
          <br>
          <p align="right"><input type="button" alt="AddColumn" value="Add"></p>
          <h5>When we click "Add" button will show new textarea</h5>
          <textarea placeholder="Please input text here.."></textarea>
        </td>

        <td style="color:Black">
          Example 5
        </td>

        <td style="color:Black">
          Example 6
        </td>

        <td style="color:Black">
          Example 7
        </td>

        <td style="color:Black">
          Example 8
        </td>

        <td style="color:Black">
          Example 9
        </td>
      </tr>


  </table>
  </form>
</div>
</body>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

这是一个生成文本区域

的示例

&#13;
&#13;
function myFunction() {
    var x = document.createElement("FORM");
    x.setAttribute("id", "myForm");
    document.body.appendChild(x);

    var y = document.createElement("TEXTAREA");
    document.getElementById("myForm").appendChild(y);
}
&#13;
<button onclick="myFunction()">Add</button>
&#13;
&#13;
&#13;