클릭 된 행을 편집 가능하게 만들기

각 행의 편집 버튼을 사용하여 다음 표를 동적으로 생성합니다.클릭 된 행을 편집 가능하게 만들기

편집 버튼을 클릭하면 행의 셀을 텍스트 상자로 변환하고 싶지만 어떻게 할 수 있습니까? 나는 그물을 올바른 구문으로 찾기 위해 시간을 보냈지 만, 내가 필요한 것을 발견 할 수는 없다.

편집을 클릭하면 사용자가 행의 데이터를 수정하고 편집 버튼 대신 나타나는 저장 또는 취소 버튼을 클릭 할 수 있습니다.

선택자로 사용할 편집 버튼에 클래스를 추가했지만 가장 효율적인 방법인지는 확실하지 않습니다.

도움을 주신 모든 분들께 감사드립니다.

감사

그것은 할 수 있지만 왜 wheeel을 재발견. 이미 동일한 문제를 해결 한이 플러그인을 확인하십시오. http://www.appelsiini.net/projects/jeditable – Chandu

"재발 명"을위한 두 가지 이유 - 1) 자바 스크립트에 대한 좋은 학습 경험, 2) 구현에 필요한 코드가 거의 필요하지 않음 이. 분명히 내 의견. – Dave

나는 이것을 학습 경험으로 사용하기를 바랬는데, 따라서 DIY 접근법이지만 너무 오래 걸렸다. 제다이 블 제안에 감사드립니다. 이 모듈을 사용하여 테이블을 수정했고 이제는 정말 잘 작동합니다! –

Jeditable은 그에게 좋은 플러그인입니다.

새로운 html5 contenteditable 속성을 살펴볼 수도 있습니다. true로 설정하면 내부의 텍스트를 편집 할 수 있습니다.

2011-08-05 12:49:28

제안에 감사드립니다,하지만 나는 제다이블과 함께 가기로 결정했습니다. –

넣어 텍스트와 테이블 셀 내부의 텍스트로 입력 상자 모두 :

가

<td id="myText"> 
    <div>My text goes here</div> 
    <input type="text" name="whatever" value="My text goes here" style="display:none;"/> 
</td>

그런 다음 편집 버튼이 둘을 전환 한 :

//if you have jquery: 
$('#myText div').toggle(); 
$('#myText input').toggle();

하는 경우 당신은 jquery를 사용하지 않습니다, 당신은 각각의 디스플레이를 변경하려면 자바 스크립트를 사용할 수 있습니다.

분명히 해결할 다른 작은 것들이 있지만 분명히 텍스트를 입력 상자로 바꾸는 것처럼 보이게 만드는 일반적인 아이디어입니다.

2011-08-05 12:55:41 Dave

감사합니다. 이것은 우아한 해결책처럼 보입니다. 결국 그것은 jeditable로갔습니다. 구현하기 쉬운 죽은 것처럼 원하는대로 정확하게하는 것처럼 보입니다! :-) –

답변