2015-04-01 79 views
0

当我按下“添加”按钮时,如何从表格中的文本显示在textarea框中?如何使用按钮将表格中的文本添加到textarea输入中?

我不需要数据在添加后消失,我只想将“添加此文本到textarea”显示在textarea框中。

https://jsfiddle.net/bj1sh4cq/

HTML

<div class="table-responsive"> 
    <table class="table table-hover"> 
     <tr> 
      <td><button class="btn btn-success" id="addButton">ADD</a> 

      </td> 
      <td><span id="addText"><strong>Add this text to textarea.</span> 

       </strong> 
      </td> 
     </tr> 
     <tr> 
      <td><button class="btn btn-success" id="addButton">ADD</a> 

      </td> 
      <td><span id="addText"><strong>Add this text to textarea.</span> 

       </strong> 
      </td> 
     </tr> 
     <tr> 
      <td><button class="btn btn-success" id="addButton">ADD</a> 

      </td> 
      <td><span id="addText"><strong>Add this text to textarea.</span> 

       </strong> 
      </td> 
     </tr> 
     <tr> 
      <td><button class="btn btn-success" id="addButton">ADD</a> 

      </td> 
      <td><span id="addText"><strong>Add this text to textarea.</span> 

       </strong> 
      </td> 
     </tr> 
     <tr> 
      <td><button class="btn btn-success" id="addButton">ADD</a> 

      </td> 
      <td><span id="addText"><strong>Add this text to textarea.</span> 

       </strong> 
      </td> 
     </tr> 
     <tr> 
      <td><button class="btn btn-success" id="addButton">ADD</a> 

      </td> 
      <td><span id="addText"><strong>Add this text to textarea.</span> 

       </strong> 
      </td> 
     </tr> 
     <tr> 
      <td><button class="btn btn-success" id="addButton">ADD</a> 

      </td> 
      <td><span id="addText"><strong>Add this text to textarea.</span> 

       </strong> 
      </td> 
     </tr> 
     <tr> 
      <td><button class="btn btn-success" id="addButton">ADD</a> 

      </td> 
      <td><span id="addText"><strong>Add this text to textarea.</span> 

       </strong> 
      </td> 
     </tr> 
    </table> 
</div> 
</div> 
</div> 
<br> 
<div class="form-group"> 
    <textarea type="text" id="reviewText" placeholder="See Text Here." class="form-control" columns="10" rows="10"></textarea> 
</div> 
</div> 
</div> 

JS

$('#addButton').on('click', function(){    

     var insertText = $('#addText').val(); 
     $('#reviewText').val($('#reviewText').val() + " "+insertText); 
}); 
+1

ID必须是唯一的! – undefined 2015-04-01 15:48:30

+0

dup? http://stackoverflow.com/questions/6734579/how-to-append-text-to-textarea – wrschneider 2015-04-01 15:50:16

+0

其实在你的小提琴中有[appendTo()'](http://api.jquery.com/append/) 。它不复制元素,它“削减”。 Vohuman在上面解释说,为什么只有第一个按钮才起作用。 – Teemu 2015-04-01 15:51:01

回答

1

首先,你不能在网页上定义多个ID。其次,你应该改变:

var insertText = $('#addText').val(); 

到:

$('#reviewText').val($(this).closest('td').next().text()); 

这里是更新fiddle

相关问题