0

I have the following 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>

And I have the following array:

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 the html table shows the first three items of the array. I would like to shift through the items by the click of the two buttons. So if i click "forward", the table shows the next item in line.

I had something like this in mind:

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

But it's obviously flawed in that it doesn't step forward by one, but by 3 - thus not showing any overlapping.

I am sure there is a better way to go about this - right?

4

2 回答 2

0

不确定这是否是您想要的：

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++;
  }  
}
于 2013-10-10T10:05:58.810 回答
0

If you have a reference to a table row, you can access the cells using the cells property:

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

You can then change the content by replacing the content of each cell starting at an index that is either one higher or lower than before:

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

The above uses the module pattern, which keeps "private" variables in a closure. That may or may not be what you want, but it shows one way of doing what you want.

It only does the plus direction, I'd make it do both plus and minus with the call passing the direction. There are other approaches, I'll leave it up to you to finish it off. :-)

于 2013-10-10T09:58:35.180 回答