Question

我要做的是用输入字段中的字符串动态替换相应的文本。（field1＆gt; field11，field2＆gt; 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>

Answer 1

这应该可以解决问题

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

或现场

http://jsfiddle.net/u8EB9/

您还可以将该功能挂钩到“更改”事件，但是在您离开输入后，您的文本只会更新！这取决于你的需求！

Answer 2

试试这个：

<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>

和jquery：

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

Answer 3

如果您打算多次使用此代码，最好使用class而不是id来阻止您需要创建一堆绑定事件。

HTML：

<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>

JS：

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

http://jsfiddle.net/c2CUE/4/

Answer 4

HTML：

<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>

的JQuery：

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

演示：

http://jsfiddle.net/F74ec/

根据提交替换文本

4 个答案: