Question

我正在开发一个应用程序，我需要更新表格单元格值所以我将该表格列编辑为如下所示。

Snapshot of the editable table column

我从stackMob数据库（云）中获取这些值。现在我想从前端更新此设备昵称（可编辑表格列），如图所示。您可以看到我将Device-nickname设置为Undefined。所以我想把名字放在我想要的位置（因为我把 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 ，并且我想在编辑设备昵称

之后获得该值

提前致谢!!!

完整代码是

<!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>

Answer 1

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

请参阅http://jsfiddle.net/Jke9J/3/

要获取其他数据，您可以为每列分配类，在数据更改后获取最接近的tr，并在找到的tr中找到这些类的数据

修改

请参阅http://jsfiddle.net/Jke9J/7/

Answer 2

<强> SCRIPT：

var editable = document.querySelectorAll('div[contentEditable]');

for (var i=0, len = editable.length; i<len; i++){
    editable[i].setAttribute('data-orig',editable[i].innerHTML);

    editable[i].onblur = function(){
        if (this.innerHTML == this.getAttribute('data-orig')) {
            // no change
        }
        else {
            // change has happened, store new value
            this.setAttribute('data-orig',this.innerHTML);
        }
    };
}

来自onChange event with contenteditable

的

已复制

您可以简化上述代码，例如

for(var i=0; i<=count; i++)
{                   
    $("#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>");                              
} 

$(document).on('blur','.divEditable',function(){
    if($(this).html()!=$(this).data('orig'))
    // innnerHTML is changed then reassign the data-orig attr
    {
        $(this).data('orig',$(this).html());
            // code to get closest imei for that row
            imei=$(this).closest('tr').find('td:first-child').html();
            console.log(imei);// to test
    }
});

从可编辑的行中获取值

2 个答案: