2012-03-07 3 views
0

테이블에서 행을 제거 할 때 문제가 있습니다.
이것이 도움이된다면 사용하는 JS 코드입니다.테이블에서 행을 제거 할 때 나머지 행이 위/아래로 이동합니다.

function rem(el) { 
    while (el.nodeName !== "TR") { 
     el = el.parentNode; 
    } 
    el.parentNode.removeChild(el); 
} 

표는 다음과 같이 내장되어 있습니다 :

<tr> 
    <td> 
    <span onclick="rem(this);"></span> 
    </td> 
</tr> 

테이블이 브라우저의 높이를 초과 스크롤이 나타날 때 문제가 발생합니다. 스크롤바가 맨 위에 내가 행을 제거하면

  • , 나머지 행 위로 흐를 것이다.

  • 스크롤 막대가 아래쪽에 있고 행을 제거하면 나머지 행 이 다운됩니다.

  • 그러나 스크롤바가 테이블의 중간에 있고 행을 제거하면 스크롤 막대가 화면 하단 에 도달 할 때까지 나머지 행이 위로 이동합니다. 그런 다음 행이 아래로 흐르기 시작합니다. 으로 테이블을으로 위아래로 흐르게하고 싶습니다. 일관성을 유지하는 한 어떤 방법 으로든 은 중요하지 않습니다.

행을 클릭하여 제거했기 때문에 테이블 플로우가 일정하게 유지되어야합니다. 나머지 행이 다른 방식으로 이동하는 경우 사용자가 다음 행이 될지, 위의 행 또는 아래의 행을 예측하기가 어렵습니다.

내 질문은 물론 "행을 삭제 한 후에 나머지 행이 어떤 방식으로 흐르게 할 수 있습니까?"

문제를 자세히 설명해야하는지 알려주세요.

+0

스크롤 막대를 제어해야한다고 생각하세요. http://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div –

+0

설명하는 내용 보통 브라우저의 동작과 비슷하게 들리지만, "flow up"과 "flow down"이 의미하는 바를 이해하지 못할 수도 있습니다. – fayerth

+0

@fayerth - 흠, 생각해 보니, 맞을지도 모릅니다. – Niklas

답변

1

this is natural behavior 이후 :

  • 당신이 최고까지 (상단의 스크롤)이 있다면, 당신은 제거 요소와 행이 위로 이동합니다. 당신은 당신이 요소를 제거하는 경우, 당연히 당신은 당신이에있는 경우

  • 을 (에 갈 아무것도 없기 때문에) 위쪽으로 갈거야, 하단 (하단에 스크롤)에서 아래 경우

  • 중간, 자연스럽게 요소를 제거하고 물건을 이동시킵니다 (케이스 1과 마찬가지로). 그리고 더 많은 것을 들어야한다면 케이스 2가 적용됩니다.문제는 행 당신이 항목을 삭제 한 후 옆에 있던 사용자에게 단지의 경우

지금, 나는 당신이 색상 코드 행 방식을 사용하는 것이 좋습니다 (추가, 말 같은 항목에 대한 ID를 보여 작업의 작업 ID)

또한 많은 데이터로 사용자를 괴롭 히거나 다음 작업을 알지 못했을 때 페이드 제거 또는 슬라이드 업 제거와 같은 작업을 사용하는 것이 좋습니다. 돌발하지 말라. (그리고 사용자는 무엇인가가 제거되었다는 것을 알아낼 수있다. jQueryUI에는 이러한 제거 효과가 많이있다.

+0

나는 무언가를 시도 할 것이지만 이것이 효과가 없다면 다시 돌아와야 할 것입니다. 감사. – Niklas

1

실제로 페이지의 동작과 관련이 없으며 브라우저가 스크롤하는 방식과 관련이 없습니다.

브라우저 페이지의 높이 이상의 공간을 추가하면 트릭을 수행해야합니다. 당신의 페이지 하단이 추가 대부분의 브라우저에

가 작동합니다

<div style='height:100%'>&nbsp;</div> 
관련 문제