Question

我有一个带有几个按钮（向上，向下，向右和向左）的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>

Answer 1

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

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

Answer 2

你的代码中的问题是你得到tr（4）＆amp;的总数。 td（6），每次加1时都不会正确停止。

尝试以下方法：

$(document).ready(function() {
  var TableHilighter = function(table, selected) {
    this.table = $(table);
    this.rows = $( "table tr" ).length;
    this.cols = $( "table tr 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-4)) {
      
        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-1)) {
     
        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');
  });
});

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

如何通过按按钮导航html表（与tbody）单元格？

2 个答案: