슈퍼 사용자 경험 테이블 정렬 javascript 구현 code_javascript 기술 달성

인터넷에서 이런 JS 효과를 본 적이 있습니다.

수정을 눌렀을 때 : (죄송합니다 사진은 글 마지막에 있습니다)
이런 목록과 수정이 모두 나와있습니다 같은 페이지 효과는 실제로 매우 좋으며 사용자에게 예상치 못한 멋진 경험을 선사할 수 있습니다. 그러나 그것은 어떻게 달성됩니까?
사실 이 효과를 얻을 수 있는 방법은 여러 가지가 있습니다. 물론 JS가 좋지 않으면 JQuery 구성 요소를 사용할 수도 있지만 직접 작성할 수 있으면 항상 더 좋다고 생각합니다. 그래서 그것을 실현하는 데 시간이 좀 걸렸습니다. 구현한 후에는 이 효과를 얻는 것이 매우 간단하다는 것을 알았습니다. JS 코드 몇 줄만으로 가능합니다. 핵심은 이를 달성하는 방법을 자세히 적어 보겠습니다.
일반 아이디어: 이 효과를 얻으려면 에 ID를 부여하여 표시하고 숨기세요.
우선 이를 실현하는 핵심 부분은 "ID"입니다. 특정 를 표시하고 숨기려고 하기 때문에 이를 구별할 수 있는 유일한 것은 ID 번호뿐입니다. 루프 "< ;tr style="max-width:90%" id="">" 형식입니다. 그런 다음 JS 코드의 ID 번호로 식별할 수 있습니다.
하지만 다시 중요한 질문이 떠오릅니다. 이 ID 값을 어떻게 얻을 수 있을까요? 저처럼 히든필드를 생각한 친구들도 있을 수 있겠지만, JS를 사용하여 히든필드의 값을 가져오면 그 ID가 고정되어 있기 때문에 안 됩니다. 매번 첫 번째 의 ID 번호만 얻을 수 있고 나머지는 얻을 수 없습니다. 그래서 뭐? ? 헤헤. . 괜찮아요. . . 사람들에게는 항상 길이 있습니다.
저희에게도 "이것"이 있습니다. 이 키워드는 정말 좋은 것입니다. "하늘에 대한 두려움이 없을 것입니다."...
이렇게 하면: JS value ". . . 이런 식으로 우리는 와 유사한 ID 번호를 쉽게 얻을 수 있습니다(참고: 왜 비슷한지는 나중에 설명하겠습니다). 아마도 주의 깊은 친구들은 내 코드 뒤에 "/m"이 있다는 것을 알았을 것입니다. . . 이것을 작성하는 이유는 ID와 분리하기 위한 것입니다. 그렇지 않으면 값을 얻을 수 없습니다(ID는 고유합니다). .
이런 식으로 의 ID 번호가 "1223"이면 내 "onclick" 이벤트에서 가져온 값은 "1223/m"입니다. JS의 문자열 분할 방법을 사용하여 < ;tr>동일한 ID 번호입니다. "var vaarray=va.split('/');var id=vaarray[0];"
. . 괜찮은. 이제 ID 번호를 얻었으니 무엇을 할 수 없나요? . . 하하하. 아래에서 보여드리겠습니다. "document.getElementById(id).style.display="block";"
....OK..OVER...
다음은 일부 키 코드입니다.
JS 부분은 다음과 같습니다. :

코드 복사 코드는 다음과 같습니다.

//Display
기능 표시 (va){
var vaarray=va.split('/');
var id=vaarray[0]
document.getElementById(id).style.display="block"; >var parID=id 'p ';
document.getElementById(parID).style.display="none";//여기에 특정
}이 있습니다. >
HTML 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

th width="13%">수정

th width="11%"><입력 이름 ="text" type="text" value="/>

디스플레이




또 다른 참고 사항: 1개 이상의 코드가 가능합니다. 게시할 때 실수로 구현하지 못한 경우 저에게 연락해 주세요.
2 위 내용은 저의 공부 기록이므로 전문적이지 않을 수 있습니다. 잘못된 점이 있으면 지적해 주시면 반드시 개선하도록 하겠습니다.