0
私はいくつかのボタン（上、下、右と左）を持つhtmlテーブルを持っています。この時点で、左右のボタンはまったく機能せず、何度か押すと何度か働きます（ユーザーが下のボタンをもう一度クリックすると下のボタンがハイライト表示されます）。最後の行にとどまるのではなく！）。専門家がこの壊れたコードを修正する方法を教えてもらえますか。事前に感謝します。ボタンを押してhtmlテーブル（tbody）セルをナビゲートする方法は？
注：私はフォーカスがjavascriptの上にしたい：私はそれはのdoItのfunctioを呼び出すことをクリックすることで、ユーザーように、別のボタンを追加したいので、セル間時にハイライトが移動しドイトの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>
多くの返信に感謝します。 @モハメド・エルハグあなたの修正は、短いサンプルではうまくいきますが、私はajax（300個のセル）のデータと、$（document）.ready（function（）が実行されるまでにテーブルを読み込んでいます。 （また、最初のセルもハイライト表示されません）！それを修正するにはどうすればいいですか？また、別のボタンを追加する予定です。そのため、そのボタンをクリックするとJavaScriptが起動します。どのように私はそれを達成することができますか？ – user1788736