我有一个带有几个按钮(上,下,右和左)的html表,以允许用户通过按每个按钮来导航表单元格。这时左右按钮完全不起作用,如果您多次按向上和向下按钮,则有时只能起作用!(当用户再次单击向下按钮时,到达最后一行的向下按钮将消失,突出显示消失而不是停留在最后一行!)。专家可以告诉我如何解决此损坏的代码。谢谢。

注意:当突出显示在单元格之间移动时,我希望焦点放在javascript:doit上,因为我想添加另一个按钮,因此用户可以通过单击它来调用doit函数!

javascript - 如何通过按按钮导航html表(带有tbody)单元格?-LMLPHP

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

最佳答案

我已经更新了您的测试,请参阅评论:)
我只在您的代码中更改了两行



$(document).ready(function() {
  var TableHilighter = function(table, selected) {
    this.table = $(table)
    this.rows = this.table.find("tbody").find('tr').length ;
    this.cols = this.table.find("tbody").find('tr').first().find('td').length ;// thead dose not containe td thats why you get -1 on cols :)
    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, v) {
      switch (dir) {
        case 'up':
          this._up();
          break;
        case 'down':
          this._down();
          break;
        case 'left':
          this._left();
          break;
        case 'right':
          this._right();
          break;
        case 'doit':
         this._doit(v);
         break;
        default:
          break;
      }
      this.hilight();
      return this.selected;
    },
    "_doit" : function(selected){

      // here i found the selected cell and row do what you want with them
     alert("value is " + 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');
  });

  $('.doit').on('click', function(e) {
    e.preventDefault();
     var selectedCel = my_table.table.find("tbody").find('td.hilighted');
     var selectedRow = selectedCel.parent();
     var row = selectedRow.index();
     var cell = selectedCel.index();
     var value = ((row * selectedRow.find("td").length) + cell) +1;

    my_table.move('doit', value);
  });

});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="up">Up</button>

<div>
    <button class="left">Left</button>
    <button class="right">Right</button>
</div>

<button class="down">Down</button>

<button class='doit'>click highlighed cell</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>

10-07 19:35
查看更多