2012-06-17 2 views
0

셀 (td 태그)을 클릭 할 수있는 Demo Table이 있으며 it.direct PHP 데이터베이스에서 값을 변경할 수 있습니다. 이렇게하려면 두 개의 태그를 포함해야합니다. 1 - span. 2 - 입력. 아래와 같습니다.mouseup 함수 대신 Blur 함수가 원하는대로 작동하지 않습니다.

<td class='Name'> 
<span id="spanName1" class="text" style="display: inline;"> Somevalue </span> 
<input type="text" value="Somevalue" class="edittd" id="inputName1" style="display: none; "> 
</td> 

jquery에서 사용하는 셀 내부의 데이터를 제어하려면. mouseup 함수입니다. mouseup이 작동하지만 문제가 발생합니다. blur 함수로 바꿔야하지만 blur로 mouseup을 대체하려고하면 프로그램이 작동하지 않습니다. 셀을 클릭하면 입력 태그를 입력 할 수 있고 값을 변경할 수는 있지만 나는 아닙니다. 성공적으로 태그/필드를 떠나는 옆에있는 테이블을 클릭하면 데이터베이스를 업데이트 할 수 있습니다. Demo with blur Here을 볼 수 있습니다. 내가 할 조언이 있니? 흐림 이벤트가 때 사용자가 클릭 문서의 주위에 발생하지 않습니다

$(document).ready(function() 
{ 
    var COLUMES,COLUME,VALUE,VAL,ROWS,ROW,STATUS,DATASTRING; 
    $('td').click(function() { 
     COLUME = $(this).attr('class'); 
     }); 
//**************** 
    $('tr').click(function() { 
     ROW = $(this).attr('id'); 
     $('#display_Colume_Raw').html(COLUME+ROW); 
     $('#span' + COLUME + ROW).hide(); 
     $('#input'+ COLUME + ROW).show(); 
     STATUS = $("#input" + COLUME + ROW).val(); 
    }); 
    //******************** 
    $(document).blur(function() { 
     $('#span' + COLUME + ROW).show(); 
     $('#input'+ COLUME + ROW).hide(); 
     VAL = $("#input" + COLUME + ROW).val(); 
     $("#span" + COLUME + ROW).html(VAL); 

     if(STATUS != VAL){ 
      //******ajax code 
       //dataString = $.trim(this.value); 
         $.ajax({ 
         type: "POST", 
         dataType: 'html', 
         url: "./public/php/ajax.php", 
         data: 'COLUME='+COLUME+'&ROW='+ROW+'&VAL='+VAL, //{"dataString": dataString} 
          cache: false, 
          success: function(data) 
          { 
           $("#statuS").html(data); 
           } 
          }); 
         //******end ajax 
         $('#statuS').removeClass('statuSnoChange') 
         .addClass('statuSChange'); 
         $('#statuS').html('THERE IS CHANGE'); 
         $('#tables').load('TableEdit2.php'); 
       } 
       else 
       { 
       //alert(DATASTRING+'status not true'); 
       } 
     });//End mouseup function 
     $('#save').click (function(){ 
      var input1,input2,input3,input4=""; 
       input1 = $('#input1').attr('value'); 
       input2 = $('#input2').attr('value'); 
       input3 = $('#input3').attr('value'); 
       input4 = $('#input4').attr('value'); 
       $.ajax({ 
        type: "POST", 
        url: "./public/php/ajax.php", 
        data: "input1="+ input1 +"&input2="+ input2 +"&input3="+ input3 +"&input4="+ input4, 
        success: function(data){ 
         $("#statuS").html(data); 
         $('#tbl').hide(function(){$('div.success').fadeIn();}); 
         $('#tables').load('TableEdit2.php'); 
        } 
       }); 
     }); 
}); 
+0

정말 질문입니까 아니면 업적입니까? –

답변

1

:

$(".edittd").mouseup(function() { 
     return false; 
    }); 
    //************* 
    $(document).mouseup(function() { 
     $('#span' + COLUME + ROW).show(); 
     $('#input'+ COLUME + ROW).hide(); 
     VAL = $("#input" + COLUME + ROW).val(); 
     $("#span" + COLUME + ROW).html(VAL); 

     if(STATUS != VAL){ 
      //******ajax code 
       //dataString = $.trim(this.value); 
         $.ajax({ 
         type: "POST", 
         dataType: 'html', 
         url: "./public/php/ajax.php", 
         data: 'COLUME='+COLUME+'&ROW='+ROW+'&VAL='+VAL, //{"dataString": dataString} 
          cache: false, 
          success: function(data) 
          { 
           $("#statuS").html(data); 
           } 
          }); 
         //******end ajax 
         $('#statuS').removeClass('statuSnoChange') 
         .addClass('statuSChange'); 
         $('#statuS').html('THERE IS CHANGE'); 
         $('#tables').load('TableEdit2.php'); 
       } 
       else 
       { 
       //alert(DATASTRING+'status not true'); 
       } 
     });//End mouseup function 

나는로 변경.

이벤트 발생시기를 확인하려면 자바 스크립트 콘솔을 사용하여 기록 기능을 첨부 할 수 있습니다. 콘솔에서 다음을 붙여 넣습니다

$(document).mouseup(function(){console.log('document.mouseup()')}); 
$(document).blur(function(){console.log('document.blur()')}); 

그리고 주위 클릭하고 흐림 당신이하지 않으면 전체 문서가 포커스를 잃고 (그리고 모든 브라우저) 발광하지 않습니다를 참조하십시오.

마우스 업이 어떤 문제를 일으켰습니까?

+0

안녕, 어떻게 mouseup에 selution을 찾을 수 있습니까? Futile plz look here [데모] (http://jsfiddle.net/centerwow/c6ABa/5/) – yossi

+0

을 클릭하면 document.click()이 실행됩니다. 뿐만 아니라 (적어도 Firefox에서는). 해당 mouseup을 click()으로 변경하고 tr click 함수의 끝에 "e.stopPropagation()"을 추가하십시오. 그러면 이벤트가 문서 클릭 핸들러로 버블 링되지 않고 tr.click이 수행 한 작업이 취소됩니다. 필드 편집을 위해 두 번 클릭해야하기 때문에 .focus()를 input1.show()에 추가 할 수도 있습니다. 참조 : [link] (http : // http : //jsfiddle.net/c6ABa/80/). –

관련 문제