【发布时间】：2017-10-01 22:40:16
【问题描述】：
我有一个带有几个按钮（上、下、右和左）的 html 表格，允许用户通过按每个按钮来导航表格单元格。此时左右按钮根本不起作用，如果您多次按下它，只有向上和向下工作有时会起作用！（如果用户再次单击向下按钮，则向下按钮到达最后一行时，突出显示消失而不是留在最后一行！）。专家能否告诉我如何修复这个损坏的代码。在此先感谢。
注意：当突出显示在单元格中移动时，我希望焦点位于 javascript:doit 上，因为我想添加另一个按钮，以便用户通过单击它调用 doit 函数！n
这是 jsfiddle 中的损坏代码：https://jsfiddle.net/yubeLjnx/
完整代码：
<head>
<style>
table td{
border:1px solid grey;
padding:10px;
}
.hilighted {
border: 2px solid red;
padding: 1px;
}
button.up {
margin-left: 2em;
}
button.down {
margin-left: 1.5em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var TableHilighter = function(table, selected) {
this.table = $(table);
this.rows = this.table.find('tr').length;
this.cols = this.table.find('tr').first().find('td').length;
this.selected = (typeof selected === 'undefined') ? [1, 1] : selected;
// Hilight our row on initialization
this.hilight();
};
TableHilighter.prototype = {
"hilight": function(cell) {
if (typeof cell === 'undefined') {
cell = this.selected;
}
// Clear all hilighted cells
this.table.find('td').removeClass('hilighted');
// First find the row, then find the col, and add the .hilighted class
this.table.find('tr:nth-child(' + this.selected[1] + ')').find('td:nth-child(' + this.selected[0] + ')').addClass('hilighted');
},
"move": function(dir) {
switch (dir) {
case 'up':
this._up();
break;
case 'down':
this._down();
break;
case 'left':
this._left();
break;
case 'right':
this._right();
break;
default:
break;
}
this.hilight();
return this.selected;
},
"_left": function() {
if (this._x() > 1) {
this._x(this._x() - 1);
}
return this.selected;
},
"_right": function() {
if (this._x() < this.cols) {
this._x(this._x() + 1);
}
return this.selected;
},
"_up": function() {
if (this._y() > 1) {
this._y(this._y() - 1);
}
return this.selected;
},
"_down": function() {
if (this._y() < this.rows) {
this._y(this._y() + 1);
}
return this.selected;
},
"_x": function(x) {
if (typeof x === 'undefined') {
return this.selected[0];
} else {
this.selected[0] = x;
return this.selected[0];
}
},
"_y": function(y) {
if (typeof y === 'undefined') {
return this.selected[1];
} else {
this.selected[1] = y;
return this.selected[1];
}
}
};
// Initialize our TableHilighter
var my_table = new TableHilighter('table');
// Add button event handlers
$('.up').on('click', function(e) {
e.preventDefault();
my_table.move('up');
});
$('.down').on('click', function(e) {
e.preventDefault();
my_table.move('down');
});
$('.left').on('click', function(e) {
e.preventDefault();
my_table.move('left');
});
$('.right').on('click', function(e) {
e.preventDefault();
my_table.move('right');
});
});
</script>
</head>
<body>
<button class="up">Up</button>
<div>
<button class="left">Left</button>
<button class="right">Right</button>
</div>
<button class="down">Down</button>
<div class="scroller">
<div id="myDiv" style="display: visiable;">
<table id="demo" style="display: visible;" cellspacing="0" border="1">
<thead>
<tr>
<th>Item#</th>
<th>Logo</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hilighted">
<div class="image">
<a href="javascript:doit('1')">
<img src="http://mywebsite/images/1/thumb.jpg" alt="">Title 1
</a>
</div>
</td>
<td>
<div class="image">
<a href="javascript:doit('2')">
<img src="http://mywebsite/images/2/thumb.jpg" alt="">Title 2
</a>
</div>
</td>
</tr>
<tr>
<td><div class="image">
<a href="javascript:doit('3')">
<img src="http://mywebsite/images/3/thumb.jpg" alt="">Title 3
</a>
</div>
</td>
<td>
<div class="image">
<a href="javascript:doit('4')">
<img src="http://mywebsite/images/4/thumb.jpg" alt="">Title 4
</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="image">
<a href="javascript:doit('5')">
<img src="http://mywebsite/images/5/thumb.jpg" alt="">Title 5
</a>
</div>
</td>
<td>
<div class="image">
<a href="javascript:doit('6')">
<img src="http://mywebsite/images/6/thumb.jpg" alt="">Title 6
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
【问题讨论】：
标签： javascript jquery html-table