テーブルで jEditable プラグインを使用しています。正常に動作しますが、セルの編集中にそのコンテンツが消えてしまい (値のないプレーンな入力テキスト ボックスが表示されるだけです)、編集が完了して Enter を押すと、完全なテキスト (既存のテキスト + 編集されたテキスト) が表示されます。ここにコードスニペットがあります -
<script type="text/javascript" src="media/js/jquery.min.js"></script>
<script src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="extensions/TableTools/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="extensions/TableTools/css/jquery.dataTables.min.css">
<link href="media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/resultTable.css">
<script type="text/javascript" src="js/jquery.jeditable.js"></script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$('#dbResultsTable').DataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers" ,
"paging": true,
"ordering" : true,
"scrollY":false,
"autoWidth": false,
"info": true ,
"scrollX": "100%" ,
"sScrollXInner": "110%",
"lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]],
columnDefs: [
{ "type": "html-string", "targets": 1 },
{ "type": "html-string", "targets": 2 },
{ "type": "html-string", "targets": 3 },
{ "type": "html-string", "targets": 4 },
{ "type": "html-string", "targets": 5 }
],
"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
}
);
});
</script>
<script>
$(document).ready(function() { /* Init DataTables */
var oTable = $('#dbResultsTable').dataTable();
var theCallback = function(v, s) {
return v;
};
$(oTable).find('td').editable(theCallback, {
"callback": function(sValue, y) {
oTable.fnUpdate(sValue);
},
});
});
</script>
<style>
table { table-layout: auto; }
table {
white-space: nowrap;
}
</style>
<style type="text/css">
td{
text-align:center;
}
</style>
</head>