基礎上提交替換文本

Question

我所試圖做的是動態替換與輸入字段中的字符串對應的文本。（字段1> field11，場2> field22）

http://jsfiddle.net/c2CUE/3/

你能不能給我有關如何在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/