通過單擊按鈕在html表中顯示下一個數組項

Question

我有以下html：

<table border="1" width="200">
    <tr id="tr1">
        <td id="TD">1</td>
        <td id="TD">5</td>
        <td id="TD">10</td>
    </tr>
    <tr id="tr2">
        <td id="TD">$1</td>
        <td id="TD">$2</td>
        <td id="TD">$3</td>
    </tr>
</table>

<button onclick="minus()">Back</button> 
<button onclick="plus()">Forward</button>

我有以下數組：

var specials = [
    { qty: '1', price: '1'},
    { qty: '5', price: '2'},
    { qty: '10', price: '3'},
    { qty: '20', price: '4'},
    { qty: '30', price: '5'},
    { qty: '40', price: '6'},
    { qty: '50', price: '7'}
];

加載html表會顯示數組的前三項。 我想通過單擊兩個按鈕來瀏覽項目。 因此，如果我單擊“前進”，該表將顯示行中的下一項。

我有這樣的想法：

var cols = document.getElementById('tr1').getElementsByTagName('td'), colslen = cols.length;
var cols2 = document.getElementById('tr2').getElementsByTagName('td');

q = -1;
function plus() {
    i = -1;

    while(++i < colslen){
        q = q+1;
        cols[i].innerHTML = specials[q].qty;
        cols2[i].innerHTML = "$"+specials[q].price;
    }
}

但這顯然是有缺陷的，因為它不會前進一個，而是前進三個，因此不會出現任何重疊。

我確信有更好的方法可以解決這個問題-對嗎？

Answer 1

如果您有對表行的引用，則可以使用cells屬性訪問單元格 ：

var cells = document.getElementById('tr1').cells;

然后，您可以通過替換每個單元格的內容（從比以前更高或更低的索引開始）來更改內容：

var plus = (function() {
  var startIndex = 0;
  var specials = [
    { qty: '1', price: '1'},
    { qty: '5', price: '2'},
    { qty: '10', price: '3'},
    { qty: '20', price: '4'},
    { qty: '30', price: '5'},
    { qty: '40', price: '6'},
    { qty: '50', price: '7'}
  ];

  return function() {
    var cells1 = document.getElementById('tr1').cells;
    var cells2 = document.getElementById('tr2').cells;

    // Only shift until the end of the specials array is reached
    if ( startIndex + cells1.length < specials.length ) {
      ++startIndex;

      for (var i=0, iLen=cells1.length; i<iLen; i++) {
        cells1[i].innerHTML = specials[i + startIndex].qty;
        cells2[i].innerHTML = specials[i + startIndex].price;
      }
    }
  }
}());

上面使用模塊模式，該模式將“私有”變量保留在閉包中。 那可能是或可能不是您想要的，但這顯示了一種執行您想要的方式。

它只做加號方向，我會通過傳遞方向的調用使其做加號和減號。 還有其他方法，請您自行完成。 :-)

Answer 2

不確定這是否是您想要的：

var cols = document.getElementById('tr1').getElementsByTagName('td'), 
cols2 = document.getElementById('tr2').getElementsByTagName('td'),
colslen = cols.length,
start = 0;

function plus(){
  if(start!=(cols.length-3)) start++;
  change();
}

function minus(){
  if(start!=0) start--;
  change();
}
function change(){
  var a = 0;
  while(a<colslen){
     cells1[a].innerHTML = specials[start+a].qty;
     cells2[a].innerHTML = "$"+specials[start+a].price;
     a++;
  }  
}