顯示下一個數組項單擊

我有以下的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; 
    } 
}

但它明顯缺陷在於沒有一個向前邁進了一步，但3 - 因此沒有顯示任何重疊。

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

來源

2013-10-10 John Smith

不知道這是否是你想要什麼：

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-10 10:05:58

關閉。但是那一個在所有三列中都顯示出相同的價值。 –

@JohnSmith哎呀，對不起，我犯了一個粗心的錯誤。我剛剛糾正它，現在應該很好。 –

如果你有一個錶行的引用，你可以使用細胞屬性訪問細胞：

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

使用模塊模式，它保持爲「私有」的變量中的封閉件。這可能是也可能不是你想要的，但它顯示了你想做的一種方式。

它只做正方向，我會讓它通過傳遞方向進行加號和減號。還有其他的方法，我會留給你完成它。 :-)

來源

2013-10-10 09:58:35 RobG

顯示下一個數組項單擊

回答

相關問題