エスケープコード入力のキーワード問題

Question

データベーステーブルから情報を取り出してHTMLテーブルに配置するページを作成しています。私はその後、クリックしたときに<td>セルを編集可能にするためにjQueryを使用しています。編集可能なセルが編集されたときを検出し、編集された情報でデータベースを更新するためにjQueryキーアップ機能を使用しようとしています。数字、文字、スペースバーが押されたときにキーアップがピックアップされますが、バックスペース、削除、またはエンターキーが押されているときに何らかの理由でピックアップされません。私のコードに誤りがあるのか​​、それを引き起こしているのか分かりません。

ご意見やご提案は非常に役に立ちます。ありがとうございます！ここで

私は迅速なテーブルの例とともにkeyUpイベントのためにも、その後、クリックイベントのために使用していますjQueryのです：

$('td').click(function() { 
 
    var val = ($(this).siblings().first().text()); 
 
    var col = $(this).parent().children().index($(this)); 
 

 
    $(this).prop('contenteditable', true); 
 

 
    $(this).keyup(function() { 
 
    $.ajax({ 
 
     method: "POST", 
 
     url: "updatedatabase.php", 
 
     data: { 
 
      content: $(this).text(), 
 
      date: val 
 
     } 
 
     }) 
 
     .done(function(msg) { 
 
     alert("Data Saved: " + msg); 
 
     }); 
 
    }); 
 
});

table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    font-size: 90%; 
 
} 
 
th, td { 
 
    padding: 8px; 
 
} 
 
td { 
 
    text-align: center; 
 
} 
 
table { 
 
    margin: 0 auto; 
 
} 
 
td:click { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th></th> 
 
    <th>22oz Dark</th> 
 
    <th>12ct 4oz Dark</th> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-01</th> 
 
    <td>9785</td> 
 
    <td>2478</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-02</th> 
 
    <td>8754</td> 
 
    <td>2136</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-03</th> 
 
    <td>13587</td> 
 
    <td>2203</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-04</th> 
 
    <td>14111</td> 
 
    <td>3297</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-05</th> 
 
    <td>13212</td> 
 
    <td>3101</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-06</th> 
 
    <td>16335</td> 
 
    <td>3299</td> 
 
    </tr> 
 
    <tr> 
 
    <th>2016-01-07</th> 
 
    <td>15421</td> 
 
    <td>3100</td> 
 
    </tr> 
 
</table>

Answer 1

を変更を拾うために、あなたはinputを見つけることができます便利なイベント：マウスやコンテキストメニュー（コピー/ペーストなど）を介して行われた変更に対してもトリガします。

また、外部イベントハンドラから内部イベントハンドラを必ず取り出してください。今のように、同じtd要素をクリックするたびに、keyupイベントハンドラの数が累積されます。

また、サーバーに送信するキーが含まれているため、ユーザーが最初の列を変更しないようにすると思います。だからここ

は、私がお勧めです：

// exclude first column from jQuery selection: 
$('td').not(':first').click(function() { 
    $(this).prop('contenteditable', true); 
}); 

// Use input event, and define it outside of above event handler: 
$('td').on('input', function() { 
    console.log('event'); 
    $.ajax({ 
    method: "POST", 
    url: "updatedatabase.php", 
    data: { 
     content: $(this).text(), 
     date: $(this).siblings().first().text() // calculate on-the-spot 
    } 
    }) 
    .done(function(msg) { 
    alert("Data Saved: " + msg); 
    }); 
}); 

あなたの質問に関係のない

：ユーザーがセルをクリックしたとき、あなたはコンテンツを編集可能。後でそれを編集不可能にすることは決してありません。なぜなら、最初からすべてを編集可能にしない理由が不思議に思うかもしれません...