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

onload 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

如果您有对表格行的引用，则可以使用单元格属性访问单元格：

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

通过按钮单击在html表中显示下一个数组项

2 个答案: