我正在开发一个需要更新表格单元格值的应用程序,因此我使该表格列可编辑,如下所示。
我从 stackMob 数据库(云)中获取这些值。现在我想从前端更新此设备昵称(可编辑表列),如图片所示。您可以看到我将设备昵称设为未定义。所以我想输入我想要的名称(因为我将alpesh 输入为 352700051252111)。现在完成编辑后,我的意思是当我完成第一行的编辑时,我想调用一个函数,该函数将更新设备昵称对应IMEI。
为了打印和增加我使用的列表:
for(var i=0; i<=count; i++)
{
$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td><div contenteditable >"+array[i].device_nickname+"</div></td><tr>");
}
现在我的问题是:
为每一行完成编辑后,如何调用函数来更新值。以及如何获得已完成编辑的IMEI,并且我还想在编辑Device-nickname后获得该值
提前致谢 !!!
完整的代码是
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dashboard</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.8.0-bundled-min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<!-- <link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.2/themes/redmond/jquery-ui.css" />-->
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="style/js/bootstrap.js"></script>
<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>
<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>
<link type="text/css" rel="stylesheet" href="style/css/bootstrap.css"></link>
<script type="text/javascript">
/* <![CDATA[ */
// Initialize StackMob object
// Copy your init data from here: https://dashboard.stackmob.com/sdks/js/config
// Your other app information is here: https://dashboard.stackmob.com/settings
StackMob.init({
appName: "swara_sangam",
clientSubdomain: ".........",
publicKey: "....",
apiVersion: 0
});
/* ]]> */
</script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
result();
function result() {
var device = StackMob.Model.extend({ schemaName: 'device' });
var mydevice = new device({organization_id:'1' });
var q = new StackMob.Collection.Query();
//q.lt('age', 50)..orderAsc('username');
q.setRange(0,15).orderDesc('lastmoddate');
mydevice.query(q, {
success: function(modal) {
//After StackMob returns "Bill Watterson", print out the result
var array = modal.toJSON();
// console.debug(array);
//$('#data').html(array[0].user_name);
var val = array[0].lastmoddate;
$('#last_mod_date').attr('value', val);
var key;
var count = 0;
for(key in array) {
if(array.hasOwnProperty(key)) {
count ++;
}
}
//alert(count);
for(var i=0; i<=count; i++)
{
// if(array[i].org_img == localStorage.getItem("stackmob.oauth2.user"))
//alert(array[i].org_img);
//$('#last_mod_date').html(array[0].lastmoddate);
//alert(val);
$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td ><div class="device-name" contenteditable>"+array[i].device_nickname+"</div></td><td>"+array[i].device_org+"</td><td>"+ new Date(array[i].lastmoddate)+"</td><tr>");
//alert("save");
//$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td><div class='divEditable' contenteditable='true' data-orig='"+array[i].device_nickname+"' >"+array[i].device_nickname+"</div></td><tr>");
alert("save");
//end if condition
} // end for loop
$('.device-name').on('blur', function(event){
alert(event.target.textContent);
alert($(event.target).closest('tr').find('.imei').text());
alert($(event.target).closest('tr').find('.model').text());
})
} //end success
}); // end imagesearch schema query
} // end result function
setInterval(check_newentry,1000);
function check_newentry() {
var device = StackMob.Model.extend({ schemaName: 'device' });
var mydevice = new device({ });
var q = new StackMob.Collection.Query();
q.orderDesc('lastmoddate');
mydevice.query(q, {
success: function(modal) {
//After StackMob returns "Bill Watterson", print out the result
var array = modal.toJSON();
// console.debug(array);
//$('#data').html(array[0].user_name);
// alert(lastmod_date_old +"..."+ lastmod_date);
if(lastmod_date_old < lastmod_date)
{
var val = array[0].lastmoddate;
$('#last_mod_date').attr('value', val);
var key;
var count = 0;
var counter=0;
for(key in array) {
if(array.hasOwnProperty(key)) {
count ++;
}
}
//alert(count);
for(var i=0; i<=count; i++)
{
$("#ui").append("<tr><td>"+array[i].device_IMEI+"</td> <td>"+array[i].device_model+"</td><td>"+array[i].device_nickname+"</td><td>"+array[i].device_org+"</td><td>"+new Date(array[i].lastmoddate)+"</td><tr>");
//------------------------------------------- end device schema code
counter++;
exit();
}
}
}
});
}
});
</script>
</head>
<body>
<div class="modal-body" style=''>
<table class="data table-bordered table table-striped" id="ui" >
<tr style="background-color:blue;color:white;"><td width="25%">Device-imei</td><td>Device-Model</td><td>device-nickname</td><td>Device-org</td><td>Time</td></tr>
</table>
</div>
<!--<div id="last_mod_date" value=""></div>
<div id="latlng" value=""></div> -->
</script>
</body>
</html>