0

私は次の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 テーブルをオンロードすると、配列の最初の 3 つの項目が表示されます。2 つのボタンをクリックして項目を移動したいと考えています。したがって、「進む」をクリックすると、テーブルに次の項目が表示されます。

私は次のようなことを念頭に置いていました：

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

しかし、1 つ進むのではなく 3 つ進むという点で、明らかに欠陥があります。つまり、オーバーラップが表示されません。

これについてもっと良い方法があると確信しています-そうですか？

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 に答える