可编辑的表格单元格在按回车键时取值

editable table cell take value on enter press?

本文关键字：回车 编辑 表格 单元格      更新时间：2023-09-26

我正在制作一个表格，目的是跟踪真实游戏的分数。因此，考虑到您可能输入了错误的值，我使单元格可编辑。我的问题是，当我输入一个值并按enter键简单地取值而不添加额外的行时，我能做些什么?

我还想补充一点，我不希望能够输入数字以外的东西。

我的标记看起来像这样:

<tr>
    <td contentEditable="true" class="center"><?php echo($score_u1)?><i class="icon-heart pull-right"></i><i class="icon-flag pull-right"></i></td>
    <td contentEditable="true" class="center"><?php echo($score_u2)?></td>
    <td contentEditable="true" class="center">0</td>
    <td contentEditable="true" class="center">0</td>
</tr>

我想这就是你想要的。代码不是很好，但只花了我几分钟，希望这能给你一些想法，你可以完善(改进)休息一下。注意:您需要为此导入jQuery。这里有一个链接可以试用:https://jsfiddle.net/bigneo/s4yksmby/1/

HTML: 

<table>
    <tr>
        <td>Team 1</td>
        <td>Team 2</td>
    </tr>
    <tr>
        <td>
            <input id="t1" type="text"></input>
        </td>
        <td>
            <input id="t2" type="text"></input>
        </td>
    </tr>
</table>

和JS: 

$(document).ready(function(){
    $('#t1').keypress(function(e){
        if(e.keyCode==13){
          if(isNaN(this.value)){
                this.select();   
            }
            else{
                $('#t2').focus();
                $('#t2').select();   
            }    
        }
    });
    $('#t2').keypress(function(e){
        if(e.keyCode==13){
            if(isNaN(this.value)){
                this.select();   
            }
            else{
          $('#t1').focus();
                $('#t1').select();   
            }   
        }
    });
});
相关文章：