如何将表格中的文本添加到使用按钮输入的文本区域
How to add text from a table to a textarea input with button?
当我按下"添加"按钮时,如何从表中获取文本以显示在文本区域框中?
添加后,我不需要数据消失,我只希望"将此文本添加到文本区域"显示在文本区域框中。
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);
});
首先,您不能在页面上定义多个id。第二,你应该改变:
var insertText = $('#addText').val();
至:
$('#reviewText').val($(this).closest('td').next().text());
这是更新的fiddle
相关文章:
- 将文本框链接到由按钮运行的javascript公式
- JS中的按钮和文本输入
- 将文本框中的值用于按钮窗体操作上的变量
- 使用加号按钮添加多个文本框,并通过PHP提交
- 输入文本框为空时的阻止按钮asp.网络表单
- 如何通过单击html按钮获得h1的文本值
- 我想重定向点击,然后更改按钮文本,我该怎么做
- html代码需要可点击的文本按钮
- 如何在单击按钮时显示文本(按钮被<span></span>标记包围)
- 用于 asp:label 的 Javascript 更多/更少文本按钮
- 如何使用jquery消除html/文本按钮内容
- 输入文件-更改数据按钮文本的文本按钮
- “编辑文本”按钮不起作用
- “更改范围文本”按钮
- 垂直对齐文本与短长文本按钮
- 为什么文本/按钮跳转页面加载(Chrome)
- 如何在移动操作系统(android,ios)中使用Javascript触发复制文本按钮
- 为文本按钮分配Jquery列表值
- Jquery改变文本按钮显示更多/显示更少
- Javascript如何制作复制此文本按钮