Jquery를 사용하면 텍스트를 클릭하면 텍스트 상자로 바뀌고 수정될 수 있음을 알 수 있습니다._jquery

Jquery를 사용하여 텍스트 상자 안의 텍스트를 클릭하는 효과를 실현하고 텍스트 상자의 텍스트를 수정할 수 있습니다.

1. 텍스트를 클릭하면 텍스트 상자가 됩니다.
2. 텍스트 상자가 자동으로 모든 텍스트를 선택합니다.
3. 텍스트 상자의 내용을 수정합니다.
4. 외부를 클릭합니다. 텍스트 상자와 텍스트 상자가 다시 열립니다. 수정된 텍스트로 변경
5. SQL 데이터베이스 내용을 동기적으로 업데이트

코드의 HTML 부분

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

td>ID


class="caname">하하< ;/b>





삭제< /td>

이름	작업
	삭제
2	하하	삭제
< b>3< /td>	하하

다음 코드를 사용하여 새 edit.js 파일을 생성하세요
🎜>


코드 복사

코드는 다음과 같습니다.

$(function() { //Get the caname 클래스가 있는 요소$(".caname" ).click(function() { var td = $(this); var txt = td.text(); var input = $("")

td.html(input)

input.click(function() { return false; }) ;
//포커스 가져오기
input.trigger("focus")
//텍스트 상자가 포커스를 잃은 후 콘텐츠를 제출하고 다시 텍스트로 변경합니다.
input.blur(function( ) {
var newtxt = $(this).val();
//텍스트 수정 여부 확인
if (newtxt != txt) {
td.html(newtxt);
/*
* 이 단락에서는 데이터베이스를 사용할 필요가 없습니다.
var caid = $.trim(td.prev().text())
//ajax는 데이터베이스를 변경합니다. 비동기적으로 date 매개변수를 추가하면 캐시 문제가 해결됩니다.
var url = "../common/ Handler2.ashx?caname=" newtxt "&caid=" caid "&date=" new Date()
/ /get() 메소드를 사용하여 일반 핸들러를 열면 데이터는 반환된 매개변수(일반 핸들러에서 반환된 매개변수 메소드 context.Response.Write("Parameter to be return");)를 받아들입니다.
//수정 데이터베이스는 일반 핸들러
$.get(url, function(data) {
if(data=="1")
{
alert("이 카테고리는 이미 존재합니다! ");
td.html(txt);
반환;
}
alert(data);
td.html(newtxt);
});
* /
}
else
{
td.html(newtxt)
}
})


Html 헤더는 jq 클래스 라이브러리 파일과 직접 작성한 edit.js 파일을 의미하므로 순서에 주의하세요




코드 복사


코드는 다음과 같습니다.