0

テーブルのセル値を更新する必要があるアプリケーションに取り組んでいるので、そのテーブルの列を以下のように編集可能にします。

編集可能なテーブル列のスナップショット

これらの値は、stackMob データベース (クラウド) から取得しています。次に、このデバイス ニックネーム (編集可能なテーブル列) をフロントエンドから更新したいと思います。Device-nickname を Undefined として取得していることがわかります。だから私は好きなように名前を付けたいです（352700051252111にalpeshを付けたように）。編集が完了したら、最初の行の編集が完了したら、デバイスのニックネームを更新する関数を呼び出したいと思います対応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>
4

2 に答える 2

1

脚本：

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 イベントから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
    }
});
于 2013-05-01T08:00:22.633 に答える
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/を参照してください

于 2013-05-01T07:50:32.460 に答える