Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹

概述功能描述： 点击“新建文件夹”按钮，在table的末尾增加一行；单击页面的新增行，使单元格td变成可编辑状态；输入内容后，当单元格失去焦点时，保存输入的内容；回车后通过AJAX提交后台完成新建文件夹。 HTML部分代码，id="table2"和EditType="TextBox"后面需要用到。 <button class="btn btn-default" type="button" id="cr

功能描述：

点击“新建文件夹”按钮，在table的末尾增加一行；单击页面的新增行，使单元格td变成可编辑状态；输入内容后，当单元格失去焦点时，保存输入的内容；回车后通过AJAX提交后台完成新建文件夹。

HTML部分代码，ID="table2"和EditType="TextBox"后面需要用到。

<button class="btn btn-default" type="button" ID="create_dir" name="create_dir" value="create_dir" style=‘margin-left:10px;margin-right:10px;color:rgb(60,141,188);‘ onclick="AddRow($(‘#table2‘)[0],1)">新建文件夹</button><table ID="table2" class="table table-hover" style="overflow: auto;" ><tr><td class=‘th3‘ EditType="TextBox">                       <img src="/static/img/file4_24.ico">&nbsp;&nbsp;&nbsp;                       {% if fileinfo.search_flag == 0 %}                       {{ fileinfo.file_name }}                       {% else %}                       {{ fileinfo.file_path }}                       {% endif %}                    </td></tr>

 

样式表格td部分，新增行改一下：

{% block style %} <style>    td{      border-bottom-wIDth: 1px;      border-bottom-style: solID;      border-bottom-color: #CCCCCC;      }      .EditCell_TextBox {      wIDth: 90%;      border:1px solID #0099CC;      }      .EditCell_DropDownList {      wIDth: 90%;      }</style>{% endblock  %}

Js部分，也是最关键的一部分：

{% block JavaScripts %}    <script>/** * Js实现可编辑的表格   * 用法:Edittables(tb1,tb2,......); **/    //添加行    function AddRow(table,index){      var lastRow = table.rows[table.rows.length-1];      var newRow = lastRow.cloneNode(true);      //计算新增加行的序号，需要引入jquery 的jar包    var startIndex = $.inArray(lastRow,table.rows);    var endindex = table.rows;     table.tBodIEs[0].appendChild(newRow);      // newRow.cells[0].INNERHTML=endindex-startIndex;    newRow.cells[1].INNERHTML="新建文件夹";    // <img src=‘/static/img/folder_24.ico‘>&nbsp;&nbsp;&nbsp;    // console.log(newRow.cells[0].INNERHTML);    SetRowCanEdit(newRow);      return newRow;  }    function SetRowCanEdit(row){    // console.log(row.cells.length);    for(var j=0;j<row.cells.length; j++){               //如果当前单元格指定了编辑类型，则表示允许编辑         var editType = row.cells[j].getAttribute("EditType");         if(!editType){          //如果当前单元格没有指定，则查看当前列是否指定          editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");         }         if(editType){          //新建后直接处于可编辑状态         EditCell(row.cells[j]);          row.cells[j].onclick = function (){           EditCell(this);          }         }      }    }      //设置指定单元格可编辑    function EditCell(element,editType){      var editType = element.getAttribute("EditType");      if(!editType){         //如果当前单元格没有指定，则查看当前列是否指定         editType = element.parentNode.parentNode.rows[0].cells[element.cellindex].getAttribute("EditType");      }            switch(editType){         case "TextBox":          CreateTextBox(element,element.INNERHTML);          break;         default:          break;      }    }      //为单元格创建可编辑输入框    function CreateTextBox(element,value){      //检查编辑状态，如果已经是编辑状态，跳过      var editState = element.getAttribute("EditState");      if(editState != "true"){         //创建文本框         var textBox = document.createElement("input");         textBox.type = "text";         textBox.classname="EditCell_TextBox";                  // value = "新建文件夹"       //设置文本框当前值         if(!value){          value = element.getAttribute("Value");         }           textBox.value = value;                 //设置文本框的失去焦点事件         textBox.onblur = function (){          CancelEditCell(this.parentNode,this.value);         }         //向当前单元格添加文本框         ClearChild(element);         element.appendChild(textBox);         textBox.focus();         textBox.select();                 //改变状态变量         element.setAttribute("EditState","true");         element.parentNode.parentNode.setAttribute("CurrentRow",element.parentNode.rowIndex);         //回车事件       textBox.onkeypress = function(event){        // console.log(element.INNERHTML);        // console.log(this.value);        if (event.keyCode == "13"){          $.AJAX({              url:"/create_dir?dir_name="+this.value,// url:"{% url ‘upload_files‘ %}",              type:"GET",data:‘‘,//              processData:false,ContentType:false,success:function (data) {                // console.log(data)                // alert("创建文件夹完成！");                history.go(0);              }          });        }       }    }    }    //取消单元格编辑状态    function CancelEditCell(element,value,text){      element.setAttribute("Value",value);      if(text){         element.INNERHTML = text;      }else{         element.INNERHTML = value;      }      element.setAttribute("EditState","false");      //检查是否有公式计算      CheckExpression(element.parentNode);      }      //清空指定对象的所有字节点      function ClearChild(element){      element.INNERHTML = "";    }  //提取指定行的数据，JsON格式    function GetRowData(row){      var rowData = {};      for(var j=0;j<row.cells.length; j++){         name = row.parentNode.rows[0].cells[j].getAttribute("name");         if(name){          var value = row.cells[j].getAttribute("Value");          if(!value){           value = row.cells[j].INNERHTML;          }        rowData[name] = value;         }    }    //alert("Productname:" + rowData.Productname);      //或者这样：alert("Productname:" + rowData["Productname"]);      return rowData;  }          //检查当前数据行中需要运行的字段    function CheckExpression(row){      for(var j=0;j<row.cells.length; j++){         expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");         //如指定了公式则要求计算         if(expn){          var result = Expression(row,expn);          var format = row.parentNode.rows[0].cells[j].getAttribute("Format");          if(format){           //如指定了格式，进行字值格式化           row.cells[j].INNERHTML = formatNumber(Expression(row,expn),format);          }else{           row.cells[j].INNERHTML = Expression(row,expn);          }         }      }    }          //计算需要运算的字段    function Expression(row,expn){      var rowData = GetRowData(row);      //循环代值计算      for(var j=0;j<row.cells.length; j++){         name = row.parentNode.rows[0].cells[j].getAttribute("name");         if(name){          var reg = new RegExp(name,"i");          expn = expn.replace(reg,rowData[name].replace(/\,/g,""));         }      }      return eval(expn);    }  $(function() {    var tabProduct = document.getElementByID("table2");      // 设置表格可编辑      // 可一次设置多个，例如：Edittables(tb1,......)      // Edittables(tabProduct);      // console.log(‘test!!!!!!!!!!!!!!‘);});</script>{% endblock %}

Js部分根据自己的需求优化了一下：

1.Edittables()设置多个表格不要了，我只需要编辑新增行就行了。而且INNERHTML会被看到td中代码。

2.tabProduct获取自己table的ID。

3.新增按钮onclick="AddRow($(‘#table2‘)[0],1)"，参数为自己表对象，注意[0]。AddRow中可以改新增行默认内容，我的为“新建文件夹”。

4.SetRowCanEdit()函数中增加如下代码，使新增行后直接处于可编辑状态，也可以单击进入编辑状态。

EditCell(row.cells[j]);

5.CreateTextBox()中获取用户输入的值，AJAX提交后台：

textBox.onkeypress = function(event){        if (event.keyCode == "13"){          $.AJAX({              url:"/create_dir?dir_name="+this.value,type:"GET",success:function (data) {                // alert("创建文件夹完成！");                history.go(0);              }          });        }       }

6.python实现新建文件夹：

def create_dir(request):    if request.method == ‘GET‘:        dir_name = request.GET.get(‘dir_name‘)        print(‘create_dir:‘+dir_name)        path = os.path.join(current_path,dir_name)        while os.path.exists(path):            path += ‘-副本‘        os.makedirs(r‘%s‘%path)        return httpResponse(path)    else:        return httpResponse("error")

7.最后，效果如下：

总结

以上是内存溢出为你收集整理的Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹全部内容，希望文章能够帮你解决Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。