如何将表格中的文本添加到使用按钮输入的文本区域

How to add text from a table to a textarea input with button?

本文关键字:文本 按钮 输入 区域 添加 表格      更新时间:2023-09-26

当我按下"添加"按钮时,如何从表中获取文本以显示在文本区域框中?

添加后,我不需要数据消失,我只希望"将此文本添加到文本区域"显示在文本区域框中。

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