Question

任何人都可以指导我关键按键事件，我无法获得正确的输入值吗？

$(document).on('keydown', $('#table1 tbody tr td input'), function (e) {
var oldValue ='?';//get the input value before keypress or edit

    var newValue = "?"; //get the input value after keypress or edit

  $('#table2').find('tbody tr').each(function (i) {
        var $td2 = $(this).find('td input:text');
        if (oldValue == $td2.val()){
            $td2.val(newValue);    
        }
    });

});

和$(document).on('keydown', $('#table1 tbody tr td input'), function (e) {应仅适用于表1的第一列，现在它也适用于触发table1第2列的按键时。

如果我将“Apple”编辑为“Apple Pie”，表2中的Apple会自动更改为“Apple Pie”。

Answer 1

试试这个：

$(document).off('keydown').on('keydown', $('#table1 tbody tr td input'), function (e) {

var oldValue =$(e.target).val();//get the input value before keypress or edit
    $(document).on('keyup', $('#table1 tbody tr td input'),function(e){ 

        $('#table2').find('td input').each(function(){
            if($(this).val() === oldValue){
                $(this).val($(e.target).val());
            }
        $(document).off('keyup');
        });
    });              
});

立即尝试：

 $(document).off('keydown').on('keydown', '#table1 input:first', function (e) {

var oldValue =$(e.target).val();//get the input value before keypress or edit
    $(document).on('keyup', '#table1 input:first',function(e){ 

        $('#table2').find('td input:first').val($(e.target).val());
        $(document).off('keyup');
    });              
});

Answer 2

这里是fiddle

这里是更好地理解我改变了事件的片段原因：如果你想立即改变

HTML CODE

<form id='form1'>
<table id='table1'>
    <tbody>
        <tr>
            <td>
                <input type='text' class="1" value="Apple" />
            </td>
            <td>
                <input type='text' value="" />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' class="2" value="Banana" />
            </td>
            <td>
                <input type='text' value="" />
            </td>
        </tr>
    </tbody>
</table>Table2
<table id='table2'>
    <tbody>
        <tr>
            <td>
                <input type='text' class="1" value="Apple" />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' class="2" value="Banana" />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' class="3" value="Banana" />
            </td>
        </tr>
    </tbody>
</table>
<br />

JAVASCRIPT CODE

$(document).on('keyup', '#table1 tbody tr td input', function (e) {

var cls = $（this）.attr（＆＃39; class＆＃39;）;

var oldValue =＆＃39;？＆＃39 ;; //在按键或编辑之前获取输入值

var newValue =＆＃34;？＆＃34 ;; //在按键或编辑后获取输入值

newValue = $（this）.val（）;

  $('#table2').find('tbody tr').each(function (i) {

    var targInp = $(this).find('td input.'+cls)//$(this).find('td input:text')hasClass(cls);
    oldValue = $(this).find('td input.'+cls).val();


    console.log('got it', oldValue);


    if (oldValue != newValue){
        targInp.val(newValue);    
    }
  });

}）;

在按键模式下将输入值从table1更改为table2

2 个答案: