1

我有一个表单，它有一个 textarea 并包含几个按钮 1 将添加一个额外的 textarea ，另一个将一次删除一个 textarea 1 ，除非它是最后一个。它的工作原理是我希望每个文本区域的大小与原始文本区域的大小相同，但我似乎无法弄清楚我做错了什么。 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>CPO Exit Form</title>
  <script type='text/javascript' src='Scripts/jquery-1.9.1.js'></script>
  <link rel="stylesheet" href = "Styles/Site2.css"></link>
<script type="text/javascript">
$(document).ready(function(){
  var counter = 2;
    $("#addButton").click(function () {
    if(counter>9){
      alert("Only 9 areas can be added to the form.");
      return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style"width: 700px; height: 56px" max="255"></textarea>');
    newTextBoxDiv.appendTo("#TextBoxesGroup");

    counter++;
     });
       $("#removeButton").click(function () {
        if(counter==2){
         alert("This is the last area it cannot be removed from the form.");
         return false;
       }   

    counter--;
      $("#TextBoxDiv" + counter).remove();
    });
   });
 </script>

 </head>
 <body>
  <div class="total">
   <fieldset><legend>Action Items:</legend>
    <div id='TextBoxesGroup'>
     <div id="TextBoxDiv1">
      <label> 1 : </label><textarea style="width: 700px; height: 56px" max="255"></textarea>
     </div>
    </div>
  <input type='button' value='Add Button' id='addButton'>
  <input type='button' value='Remove Button' id='removeButton'>
 </body>
 </html>
4

2 回答 2

0

你改这句话

newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style"width: 700px; height: 56px" max="255"></textarea>')

后...

newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style"width: 760px; height: 56px" rows="5" style="width: 764px">')
于 2013-05-09T21:41:09.140 回答
0

这是一个小错误，但您在 JavaScript 中缺少=afterstyle属性。（演示）

改变这个：

newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style"width: 700px; height: 56px" max="255"></textarea>');

对此：

newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style="width: 700px; height: 56px" max="255"></textarea>');

一种更简洁的方法是使用 CSS 来设置<textarea>元素的样式，如下所示：

textarea.Wide {
  width: 700px;
  height: 56px
}

然后您可以将您的 HTML（和 JavaScript）更改为：

<textarea class="Wide" max="255"></textarea>
于 2013-05-10T21:47:22.743 回答