temp

temp

关注
发信
关注(28)粉丝(399)

使用箭头键导航两个带有输入文本的HTML表格

本文介绍了使用箭头键导航两个带有输入文本的HTML表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的，我问了如何使用箭头键导航表格单元格。现在我正在尝试创建另一个与第一个表相同的表。



如何达到这个目标？



这是我到目前为止。



{（this）.html（idx）;}）; rePosition（）; $（document）.keydown（function（e）{var inp = String.fromCharCode（event.keyCode）; if（！（/ [a- zA-Z0-9-_] /。test（inp）|| event.keyCode == 96））{reCalculate（e）; rePosition（）; //如果key是一个箭头键，不要输入用户输入（e.keyCode>&& e.keyCode< 41）{return false;}}}）; //如果是其他键（a，b，c等） ; $（'td'）。click（function（）{active = $（this）.closest（'table tbody'）。find（'td'）。index（this）; rePosition（）;}）; function reCalculate （e）{var rows = $（'＃navigate tbody tr'）。length; var columns = $（'＃navigate tbody tr：eq（0）td'）。length; var temp;如果（e.keyCode == 37）{//向左移动或包装temp = active; while（temp> 0）{temp = temp-1; //只在td中有输入字段if（$（'＃navigate tbody tr td'）。eq（temp）.find（'input'）。length！= 0）{active = temp;打破; }}} if（e.keyCode == 38）{//向上移动temp = active; while（temp - columns> = 0）{temp = temp - columns; //只在td中有输入字段if（$（'＃navigate tbody tr td'）。eq（temp）.find（'input'）。length！= 0）{active = temp;打破; }}} if（e.keyCode == 39）{//向右移动或包装temp = active; while（temp 
  td.active {border：2px solid＃2c3e50 ; font-weight：bold; background-color：#ddd;}。textClass {font-weight：bold; } input：focus {outline：none; }  
 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 1.8.3 / jquery.min.js>< / script>< table border =1id =navigate> < THEAD> <的第i; CELL 1< / th> <的第i; CELL 2< / th> <的第i; CELL 3< / th> <的第i; CELL 4< / th> <的第i; CELL 5< / th> < / THEAD> < TBODY> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < / tbody>< / table>< br>< br>< table border =1id =table2> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < TBODY> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < TR> < td>< input type =textvalue =CELL 1/>< / td> < td>< input type =textvalue =CELL 2/>< / td> < td>< input type =textvalue =CELL 3/>< / td> < td>< input type =textvalue =CELL 4/>< / td> < td>< input type =textvalue =CELL 5/>< / td> < / TR> < / tbody>< / table>

请参阅此示例演示链接。




On my previous post, I asked how to navigate a table cell using an arrow key. And now I'm trying to create another table that will behave same with the first one.

How to achieve this?

Here is what I have so far.

var active = 0;
//$('#navigate td').each(function(idx){$(this).html(idx);});
rePosition();

$(document).keydown(function(e) {
    var inp = String.fromCharCode(event.keyCode);
    if (!(/[a-zA-Z0-9-_ ]/.test(inp) || event.keyCode == 96)){
      reCalculate(e);
      rePosition();
      // if key is an arrow key, don't type the user input.
      // if it is any other key (a, b, c, etc)
      // edit the text
      if (e.keyCode > 36 && e.keyCode < 41) {
        return false;
      }
    }
});

$('td').click(function() {
    active = $(this).closest('table tbody').find('td').index(this);
    rePosition();
});


function reCalculate(e) {
    var rows = $('#navigate tbody tr').length;
    var columns = $('#navigate tbody tr:eq(0) td').length;
    var temp;

    if (e.keyCode == 37) { //move left or wrap
        temp = active;
        while (temp > 0) {
            temp = temp - 1;
            // only advance if there is an input field in the td
            if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 38) { // move up
        temp = active;
        while (temp - columns >= 0) {
            temp = temp - columns;
            // only advance if there is an input field in the td
            if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 39) { // move right or wrap
        temp = active;
        while (temp < (columns * rows) - 1) {
            temp = temp + 1;
            // only advance if there is an input field in the td
            if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
    if (e.keyCode == 40) { // move down
        temp = active;
        while (temp + columns <= (rows * columns) - 1) {
            temp = temp + columns;
            // only advance if there is an input field in the td
            if ($('#navigate tbody tr td').eq(temp).find('input').length != 0) {
                active = temp;
                break;
            }
        }
    }
}

function rePosition() {
    console.log(active);
    $('.active').removeClass('active');
    $('#navigate tbody tr td').eq(active).addClass('active');
    $('#navigate tbody tr td').find('input').removeClass('textClass');
    $('#navigate tbody tr td').eq(active).find('input').addClass('textClass');
    $('#navigate tbody tr td').eq(active).find('input').select();
    var input = $('#navigate tbody tr td').eq(active).find('input').focus();
    scrollInView();
}

function scrollInView() {
    var target = $('#navigate tbody tr td:eq(' + active + ')');
    if (target.length) {
        var top = target.offset().top;

        $('html,body').stop().animate({
            scrollTop: top - 100
        }, 400);
        return false;
    }
}
td.active{
border:2px solid #2c3e50;
font-weight:bold;
background-color:#ddd;
}

.textClass{ 
    font-weight:bold; 
}

input:focus {
    outline: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table border="1" id="navigate">
    <thead>
            <th> CELL 1</th>
            <th> CELL 2</th>
            <th> CELL 3</th>
            <th> CELL 4</th>
            <th> CELL 5</th>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>

    </tbody>
</table>

<br><br>

<table border="1" id="table2">
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
    <tbody>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
             <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>
        <tr>
            <td><input type="text" value="CELL 1" /></td>
            <td><input type="text" value="CELL 2" /></td>
            <td><input type="text" value="CELL 3" /></td>
            <td><input type="text" value="CELL 4" /></td>
            <td><input type="text" value="CELL 5" /></td>
        </tr>

    </tbody>
</table>

Please refer to this link for the sample demo.

DEMO HERE

解决方案

After a bit sweating research, it gets to the proper solution. As we can't click inside the TDs of any other tables: we need to change the way of finding the index of td.

Currently it's as:

$(this).closest('table tbody').find('td').index(this);

This always returns the first table td indexes.

Below code helps finding exact index of TD where current focus is:

$('table td').index(this);

Though it looks a simple line.. little huge Research made it that small...

Working DEMO

这篇关于使用箭头键导航两个带有输入文本的HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-27 16:28
Powered by LMLPHP ©2024 temp 0.001644