0

セル (td タグ) をクリックできるデモ テーブルがあり、it.direct php データベースの値を変更できます。そのためには、2 つのtags.1 - スパンを含める必要があります。2 - 入力。 以下のように。

<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 は機能しますが、問題も発生します。ぼかし機能に置き換える必要がありますが、マウスアップをぼかしに置き換えようとすると、プログラムが機能しません。セルをクリックすると入力タグを入力でき、値を変更できますが、成功しないためですテーブルの外側をクリックしてタグ/フィールドを残すと、DataBase を更新でき ます あなたは私に何をするようにアドバイスしますか?

$(".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).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');
                    }
                });
        });
});
4

1 に答える 1

1

ユーザーがドキュメントの周囲をクリックしても、blur イベントは発生しません。

イベントがいつ発生するかを確認するには、javascript コンソールを使用してログ機能をアタッチできます。これらをコンソールに貼り付けます。

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

次に、クリックして、ドキュメント全体がフォーカスを失っていない限り (すべてのブラウザーではなく)、ぼかしが発生しないことを確認します。

マウスアップはどのようなトラブルを引き起こしましたか?

于 2012-06-17T15:13:06.393 に答える