Javascript 根据提交替换文本

我试图做的是用输入字段中的字符串动态替换相应的文本。（field1>field11，field2>field22）

你能给我一些关于如何在jquery中实现它的线索吗

<table>
  <tr>
    <td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
    <td><span class="field11">asdasd</span></td>
  </tr>
  <tr>
          <td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
      <td><span class="field22">asdasd</span></td>
  </tr>
</table>

字段1
asdasd
字段1
asdasd

这应该可以做到

$(document).ready(function () {
    $("input.field1").on("keyup",function () {
        $("span.field11").html($(this).val()); 
    });
});

还是在现场

您也可以将函数挂接到“change”事件，但是在您离开输入之后，您只能更新文本！ 这取决于你的需要

试试这个：

<form id="form" method="post">
    <table>
       <tr>
       <td><h2>Field 1</h2>
           <input type="text" name="field1" value="qwerty" class="field1"></td>
       <td><span class="field11">asdasd</span></td>
       </tr>
       <tr>
       <td><h2>Field 1</h2>
           <input type="text" name="field2" value="qwerty"></td>
       <td><span class="field22">asdasd</span></td>
       </tr>
    </table>
</form>

---

如果您打算多次使用此代码，那么最好使用

class

s而不是

id

，以停止创建大量绑定事件

html:

HTML：

演示：

---

我肯定忘了写脚本代码。您想用输入中的内容替换整个文本吗？或者您希望查找跨度中的字符并将其替换为输入中的内容？还允许使用jQuery还是纯js？

$(document).ready(function(){
    $('#form').submit(function(e){
        e.preventDefault();
        $('.field11').html($('.field1').val());
        $('.field22').html($('.field2').val());
    });
}

<table>
  <tr>
    <td>
      <h2>Field 1</h2>
      <input type="text" name="field1" value="qwerty" class="replacer" />
      <input type="button" class="replace" value="replace" />
    </td>
    <td>
      <span class="replacee field11">asdasd</span>
    </td>
  </tr>
  <tr>
    <td>
        <h2>Field 1</h2>
        <input type="text" class="replacer" name="field2" value="qwerty" />
        <input type="button" class="replace" value="replace" />
    </td>
    <td>
      <span class="replacee field22">asdasd</span>
    </td>
  </tr>
</table>

$('.replace').on('click', function(){
    var parentRow = $(this).closest('tr');
    parentRow.find('.replacee').text(parentRow.find('.replacer').val());
});

<table>
  <tr>
    <td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
    <td><span class="field11">asdasd</span></td>
  </tr>
  <tr>
          <td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
      <td><span class="field22">asdasd</span></td>
  </tr>
</table>

$("input[type='text']").on("keyup",function () {
        $(this).parent().next().find('span').html($(this).val());
});