点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）

1.先上最后效果图：

2.代码跟上，重点在 2）：

1）

//服务列表页面动态加载服务
      function ready() {var url = base_path+"console/cfg/getBaseLayers/"+configId;$.ajax({url:url,type:"get",dataType:"json",success:function (result) {//生成之前先清空tr,防止AJAX异步加载重复生成
         $("#lot tr").remove();var length = result.length;for (var i=0;i<length;i++){var name = result[i].name; //服务名称
            var alias = result[i].alias;//服务别名
            var type = result[i].type;//服务类型
            var year = result[i].year;//年份
            var url = result[i].url;//服务地址
            var visible = result[i].visible;//是否可见
            var id =  result[i].id;//id
                      serviceIdArray[i] = id;//此处将id塞给serviceIdArray，用于判断是否添加。
            var str = "";if (visible==true){//生成tr
               str += '<tr id = "';str += id;str += '"';str += ' class="lot_box"> <td>';str += i+1;str += '</td> <td>';str += name;str += '</td> <td>';str += alias;str += '</td> <td>';str += type;str += '</td> <td>';str += year;str += '</td> <td>';str += url;str += '</td> <td>';str += '<input id="';str += id;str += '"';str += 'type="checkbox" checked="true" οnchange="modifyService(this.id);"/>';str += '</td> <td> <input id="';str += id;str += '"';str += 'type="button" value="编辑" οnclick="editTd(this.id)"/>';str += '</td> <td>';str += '<button class="rosy" id="';str += id;str += '"';str += ' οnclick="deleteService(this.id);">';str += '<img src="static/img/del14.png"></button>';str += '</td> </tr>';}else {//生成tr
               str += '<tr id = "';str += id;str += '"';str += ' class="lot_box"> <td>';str += i+1;str += '</td> <td>';str += name;str += '</td> <td>';str += alias;str += '</td> <td>';str += type;str += '</td> <td>';str += year;str += '</td> <td>';str += url;str += '</td> <td>';str += '<input id="';str += id;str += '"';str += 'type="checkbox" οnchange="modifyService(this.id);"/>';str += '</td> <td> <input id="';str += id;str += '"';str += 'type="button" value="编辑" οnclick="editTd(this.id)"/>';str += '</td> <td>';str += '<button class="rosy" id="';str += id;str += '"';str += ' οnclick="deleteService(this.id);">';str += '<img src="static/img/del14.png"></button>';str += '</td> </tr>';}var $tr = $(str);$("#lot").append($tr);}}});
}

2）

//修改table行内元素(td)
function editTd(id) {
   //选中编辑按钮的时候,把这行指定的几个td变成文本框
   var b = $("input[type='button'][id='"+id+"']").parent(); //td
   var a = b.siblings(); //td的兄弟节点
   if(a[1].children.length===0){a[1].innerHTML="<input type='text' value='"+a[1].innerText+"'/>";}if(a[2].children.length===0){a[2].innerHTML="<input type='text' value='"+a[2].innerText+"'/>";}if(a[3].children.length===0){a[3].innerHTML="<input type='text' value='"+a[3].innerText+"'/>";}//将编辑改成 保存和取消两个按钮
   b[0].innerHTML="<input id='"+id+"' type='button' οnclick='saveEditTd(this.id);' value='保存'/><input type='button' οnclick='resertEditTd();' value='取消'/>";//以下注掉的都是在网上找的参考。
   /*alert(a[0].getText());
   var $this = $(this).index();
   alert($this);*/

   /*$('input[type="button"]').on('click', function(){
      var $this = $(this).parent().parent();//tr
      ready();
   });*/

   /*var $ = function(node) {
      return typeof node == "string" ? document.getElementById(node) : node;
   }
   var $1 = function(node, parent){
      var nd = document.createElement(node);
      if(parent) parent.appendChild(nd);
      return nd;
   }
   /!** 绑定事件流 *!/
   var bind = function(obj, eventName, funcionName){
      if(obj.addEventListener){
         obj.addEventListener(eventName, funcionName,false);
      }else if(obj.attachEvent) {
         obj.attachEvent("on" + eventName, funcionName);
      }else{
         obj["on" + eventName] = funcionName;
      }
   };

   var fulltable = function(tbody, data){
      var pd = data.data;
      var column = data.column;
      for(var i=0, len=data.rows; i<len; i++){
         var tr = $1("tr", tbody);
         var cd = pd[i];
         for(var j=0,jlen=column.length; j<jlen; j++){
            var td = $1("td", tr);
            td.innerHTML = cd[column[j]];//innerText不兼容火狐，可以自己写innerText和textContent的兼容，这里就直接用innerHTML了
         }
      }
   }
   var littlehow_edit_table = function(tbody, ev){
      this.tbody = $(tbody);
      this.event = ev ? ev : "click";//默认为单机事件
      this.init = function(data) {//data可以是undefined
         if(data) {
            fulltable(this.tbody, data);
         }
         //调用可编辑
         this.edit();
      }
      this.edit = function(){
         var tds = this.tbody.getElementsByTagName("td");
         for(var i=0,len=tds.length; i<len; i++){
            bind(tds[i], this.event, this.click);
         }
      }
      this.click = function(){
         //alert(this.children.length);
         if(this.children.length > 0) return;
         var v = this.innerHTML;
         this.innerHTML = "";
         var input = $1("input", this);
         input.type = "text";
         input.value = v;
         input.focus();//光标聚集
         bind(input, "blur", blur);
      }
      var blur = function(){
         var v = this.value;
         this.parentNode.innerHTML = v;
      }
   }
   window.$$ = function(id, ev){
      return new littlehow_edit_table(id, ev);
   };*/

   /*$('.editable').handleTable({
      "handleFirst" : true,
      "cancel" : " <span class='glyphicon glyphicon-remove'></span> ",
      "edit" : " <span class='glyphicon glyphicon-edit'></span> ",
      "add" : " <span class='glyphicon glyphicon-plus'></span> ",
      "save" : " <span class='glyphicon glyphicon-saved'></span> ",
      "confirm" : " <span class='glyphicon glyphicon-ok'></span> ",
      "operatePos" : -1,
      "editableCols" : [2,3,4],
      "order": ["add","edit"],
      "saveCallback" : function(data, isSuccess) { //这里可以写ajax内容，用于保存编辑后的内容
         //data: 返回的数据
         //isSucess: 方法，用于保存数据成功后，将可编辑状态变为不可编辑状态
         var flag = true; //ajax请求成功（保存数据成功），才回调isSuccess函数（修改保存状态为编辑状态）
         if(flag) {
            isSuccess();
            alert(data + " 保存成功");
         } else {
            alert(data + " 保存失败");
         }

         return true;
      },
      "addCallback" : function(data,isSuccess) {
         var flag = true;
         if(flag) {
            isSuccess();
            alert(data + " 增加成功");
         } else {
            alert(data + " 增加失败");
         }
      },
      "delCallback" : function(isSuccess) {
         var flag = true;
         if(flag) {
            isSuccess();
            alert("删除成功");
         } else {
            alert("删除失败");
         }
      }
   });*/

   /*//dom创建文本框
   var input = document.createElement("input");
   input.type="text" ;
   //得到当前的单元格
   var currentCell ;
   function editCell(event) {
      if(event==null) {
         currentCell=window.event.srcElement;
      }
      else {
         currentCell=event.target;
      }
      //根据Dimmacro 的建议修定下面的bug 非常感谢
      if(currentCell.tagName=="TD"){
         //用单元格的值来填充文本框的值
         input.value=currentCell.innerHTML;
         //当文本框丢失焦点时调用last
         input.οnblur=last;
         input.οndblclick=last;
         currentCell.innerHTML="";
         //把文本框加到当前单元格上.
         currentCell.appendChild(input);
         //根据liu_binq63 的建议修定下面的bug 非常感谢
         input.focus();
      }
   }
   function last() {
      //充文本框的值给当前单元格
      currentCell.innerHTML = input.value;
   }
   //最后为表格绑定处理方法.
   document.getElementById("table").οndblclick=editCell;*/

   /*var ttr = $(this).val()=="编辑"?"确定":"编辑";

   $(this).val(ttr);   // 按钮被点击后，在“编辑”和“确定”之间切换

   $(this).parent().siblings("td").each(function() {  // 获取当前行的其他单元格

      var obj_text = $(this).find("input:text");    // 判断单元格下是否有文本框

      if(!obj_text.length)   // 如果没有文本框，则添加文本框使之可以编辑

         $(this).html("<input type='text' value='"+$(this).text()+"'>");

      else   // 如果已经存在文本框，则将其显示为文本框修改的值

         $(this).html(obj_text.val());

   });*/

   /*$('input[type="button"]').on('click', function(){
      var $this = $(this);
      var $td_arr = $this.parent().html('保存').prevAll('td');
      $.each($td_arr, function(){
         var $td = $(this);
         $td.html('<input type="text" value="'+$td.html()+'">');
      });
   });*/

}

3）

//取消editTd编辑
function resertEditTd() {ready(); //此方法是自己写的，局部刷新页面，重新加载数据
}

//保存editTd编辑
function saveEditTd(id) {var a = $("input[type='button'][id='"+id+"']").parent().siblings(); //td的兄弟节点
   var td_name = a[1].children[0].value; //服务名称
   var td_alias = a[2].children[0].value; //服务别名
   var td_type = a[3].children[0].value; //服务类型

   var url = base_path+"console/cfg/saveEditTd";$.ajax({url:url,type:"post",data:{"td_name":td_name,"td_alias":td_alias,"td_type":td_type,"id":id,"tpl":configId
      },datatype:"json",success:function (result) {ready(); //此方法是自己写的，局部刷新页面，重新加载数据}});
}

点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）相关推荐

python测试开发django-173.bootstrap实现table表格行内编辑
前言网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
bootstrap table 表格支持shirt 多选_bootstrap-table 表格行内编辑实现
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能. 我的web前端学习交流群点击进入1045267283,欢迎加入! 先放一张效果图: 应用场景之前的项目也是采 ...
[转]Laravel与bootstrap-editable实现table的行内编辑
[转]Laravel与bootstrap-editable实现table的行内编辑准备需要的库 bootstrap3.0下载 bootstrap-table下载 x-editable-develop ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
Datatables实现表格行内编辑功能
表格行内编辑功能通过操作DOM来实现,最终实现效果如下代代码 html <table class="table table-striped table-bordered table-h ...
html编辑点击取消复原,vue点击编辑按钮，内容变成input可以修改，也可以删除
一.效果图1 图2,点击报错之后,又变成图1的效果二.使用到了element UI中的以下组件: 三.使用的关键点是vue中的v-if指令四.关键代码如下 HTML部分添加街道编辑保存 @ ...
LabVIEW 调整Table表格行高列宽的方法与例程
LabVIEW 调整Table表格行高列宽的方法与例程在 VI 运行时,可以用两种不同的方式更改表中的列宽度.首先,可以用鼠标更改它们:其次,可以通过属性节点编程更改它们. 手部更列表的宽度只有在 ...
AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载
2019独角兽企业重金招聘Python工程师标准>>> 特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以 ...
layui表格点击排序按钮后，表格绑定事件失效解决方法
layui表格点击排序按钮后,表格绑定事件失效解决方法参考文章: (1)layui表格点击排序按钮后,表格绑定事件失效解决方法 (2)https://www.cnblogs.com/gongliha ...

点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）

点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）相关推荐

最新文章

热门文章