보기 다음 배열 항목을 클릭

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 테이블의 처음 세 항목을 보여줍니다 배열 두 버튼을 클릭하여 항목을 이동하고 싶습니다. "forward"를 클릭하면 테이블에 다음 항목이 표시됩니다.

나는 마음에 이런 일이 있었다 :

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에 의한 것 - 따라서 겹치는 표시되지.

나는 이것에 대해 더 좋은 방법이 있다고 확신합니다 - 맞습니까?

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

당신은 다음 인덱스부터 시작하여 각 셀의 내용을 대체하여 내용을 변경할 수 있습니다 : 당신이 테이블 행에 대한 참조가있는 경우

Answer 1

이 당신이 원하는 경우 확실하지 :

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

Answer 2

, 당신은 세포를 속성을 사용하여 세포에 액세스 할 수 있습니다 위의 값은 이전보다 높거나 낮은 값 중 하나입니다.

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

위의 코드는 "개인"변수를 클로저에 유지하는 모듈 패턴을 사용합니다. 그것은 당신이 원하는 것일 수도 아닐 수도 있지만, 당신이 원하는 것을하는 한 가지 방법을 보여줍니다.

더하기 방향 만 수행하면 방향을 전달하는 호출에서 더하기와 빼기를 모두 수행 할 수 있습니다. 다른 접근법이 있습니다. 끝내기 위해 여러분에게 남겨 두겠습니다. :-)