Question

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

如何实现这一目标？

这是我到目前为止所做的：

＆＃13;

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

＆＃13;

td.active{
border:2px solid #2c3e50;
font-weight:bold;
background-color:#ddd;
}

.textClass{ 
    font-weight:bold; 
}

input:focus {
    outline: none; 
}

＆＃13;

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

＆＃13;

请参阅此链接以获取示例演示。

DEMO HERE

Answer 1

经过一番冒汗研究后，它得到了正确的解决方案。因为我们无法在任何其他表的TD中单击：我们需要更改查找td索引的方式。

目前它是：

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

这总是返回第一个表td索引。

下面的代码有助于找到当前焦点为的TD的精确索引：

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

虽然它看起来很简单......但是巨大的研究使它变得那么小......

Working DEMO

Answer 2

发送表格 id $('td').click

$('td').click(function() {
    active = $(this).closest('table tbody').find('td').index(this);
    var tableid=$(this).closest('table').attr('id');
    console.log(tableid);
    rePosition(tableid);
});

和更改功能 rePosition()

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

现场演示 Here

代码段示例

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);
    var tableid=$(this).closest('table').attr('id');
    console.log(tableid);
    rePosition(tableid);
});


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(tableid) {
    console.log(active);
    $('.active').removeClass('active');
    $('#'+tableid+' tbody tr td').eq(active).addClass('active');
    $('#'+tableid+' tbody tr td').find('input').removeClass('textClass');
    $('#'+tableid+' tbody tr td').eq(active).find('input').addClass('textClass');
    $('#'+tableid+' tbody tr td').eq(active).find('input').select();
    var input = $('#'+tableid+' tbody tr td').eq(active).find('input').focus();
    scrollInView(tableid);
}

function scrollInView(tableid) {
    var target = $('#'+tableid+' 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.9.1/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>

Answer 3

尝试THIS DEMO

如果有两个表或更多表...使用Class来识别所有表

我写过class="tblnavigate"来调用Javascript中的表格单元格。

因此，重新定位功能如下：

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

<强>更新

退格必须按照其功能运行，因此请将其排除在keydown函数中，

if ((!(/[a-zA-Z0-9-_ ]/.test(inp) || e.keyCode == 96)) && e.keyCode != 8){ ... }

UPDATED DEMO

Answer 4

用以下代码替换您的函数并检查：

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

查看更新后的演示：Click Here

Answer 5

我在最近的一个项目中使用了它，它运行得很完美：https://gist.github.com/krcourville/7309218

使用箭头键在输入文本中导航两个HTML表

5 个答案: