更新按钮上的输入值 单击Jquery

Question

对于下面的代码，当单击按钮时，它应该更新文本的名称。 即希斯，你好，苏普萨利， 但相反，电流是命中，海洛托姆，上。 我想知道有没有办法在保持文本 hi，hellop 和 sup 的同时更新名称。 非常感谢

$(".ok").on('click', function() {
var set = $(this).closest('tr').find('.done').val();
if (set) {
$(this).closest('tr').find('.text').each(function() {
$(this).val($(this).attr("data-value") + set);
})
}
});

<table>
<tr>
<td>
<input type="button" value="ok" class="ok"></td>
<td>done<input type="text" value="sally" class="done" > </td>
<td>text1<textarea class="text" data-value="hitom">hitom</textarea> </td>
<td>text2<textarea class="text" data-value="hellotom">hellotom</textarea> </td>
<td>text3<textarea class="text" data-value="suptom">suptom</textarea> </td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

Answer 1

您需要将data-value更改为仅要预置的值textarea

$(".ok").on('click', function() {
var set = $(this).closest('tr').find('.done').val();
if (set) {
$(this).closest('tr').find('.text').each(function() {
$(this).val($(this).attr("data-value") + set);
})
}
});

<table>
<tr>
<td>
<input type="button" value="ok" class="ok"></td>
<td>done<input type="text" value="sally" class="done" > </td>
<td>text1<textarea class="text" data-value="hi">hitom</textarea> </td>
<td>text2<textarea class="text" data-value="hello">hellotom</textarea> </td>
<td>text3<textarea class="text" data-value="sup">suptom</textarea> </td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

Answer 2

data-value包含文本区域的错误值，您实际上是将文本框的值连接到它们。更正data-value属性中的值，您将完成！

$(".ok").on('click', function() {
var set = $(this).closest('tr').find('.done').val();
if (set) {
$(this).closest('tr').find('.text').each(function() {
$(this).val($(this).attr("data-value") + set);
})
}
});

<table>
<tr>
<td>
<input type="button" value="ok" class="ok"></td>
<td>done<input type="text" value="sally" class="done" > </td>
<td>text1<textarea class="text" data-value="hi">hitom</textarea> </td>
<td>text2<textarea class="text" data-value="hello">hellotom</textarea> </td>
<td>text3<textarea class="text" data-value="sup">suptom</textarea> </td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

Answer 3

我正在从每个字符串中删除"tom"。

$(".ok").on('click', function() {
var set = $(this).closest('tr').find('.done').val();
if (set) {
$(this).closest('tr').find('.text').each(function() {
$(this).val($(this).attr("data-value").replace(/tom/g,"")+set);
})
}
});

<table>
<tr>
<td>
<input type="button" value="ok" class="ok"></td>
<td>done<input type="text" value="sally" class="done" > </td>
<td>text1<textarea class="text" data-value="hitom">hitom</textarea> </td>
<td>text2<textarea class="text" data-value="hellotom">hellotom</textarea> </td>
<td>text3<textarea class="text" data-value="suptom">suptom</textarea> </td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>