【html+js】td元素可编辑，绑定事件并可读取当前对象

最新推荐文章于 2024-05-13 08:14:10 发布

dmc436

最新推荐文章于 2024-05-13 08:14:10 发布

阅读量1.7k

点赞数

文章标签： javascript bind this

本文链接：https://blog.csdn.net/dmc436/article/details/80027006

版权

td div等元素可编辑，只需要加入属性contentEditable='true'；

绑定事件，并获取this，可以通过var that=this;来获取

<body>
<table id="table" cellpadding="2px" border=1 cellspacing=0></table>
</body>
<script>
var tdValue='';
window.onload = function(){
  $.ajax({
          type: "GET",
          url: "/dev/data",
          data: "",
          success: function(msg){
                str = "<tr><th>ID</th><th>IP地址</th><th>用户名</th><th>登录密码</th><th>备注</th><th>设备类型</th><th>是否收集</th>";
                for(var i=0; i< msg['device'].length; i++){
                  str += "<tr>";
                  str += "<td>"+msg['device'][i]["id"]+"</td>";
                  str += "<td contentEditable='true'>"+msg['device'][i]["ip"]+"</td>";
                  str += "<td contentEditable='true'>"+msg['device'][i]["user"]+"</td>";
                  str += "<td contentEditable='true'>"+msg['device'][i]["password"]+"</td>";
                  str += "<td contentEditable='true'>"+msg['device'][i]["info"]+"</td>";
                  str += "<td contentEditable='true'>"+msg['device'][i]["type"]+"</td>";
                  if(typeof(msg['device'][i]["used"])=="undefined"){
                    str += "<td>false</td>";
                  }
                  else{
                    str += "<td>"+msg['device'][i]["used"]+"</td>";
                  }
                  str += "</tr>";
                }
                  $("#table").html(str);
                  $("td").bind("focus",function (){
                    var that = this;
                    tdValue = $(that).html();
                  });
                  $("td").bind("blur",function (){
                    var that = this;
                    if (tdValue !=$(that).html()){
                      ajax_td_new_value(that);
                    }
                  });
           },
          error: function(msg){
             $("#table").html(msg);
             }
         });
}
function ajax_td_new_value(item){
  alert($(item).parent().html());
}