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

版本：

django：2.1.7

python：3.7

功能描述：

点击“新建文件夹”按钮，在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,tb2,......); 
**/  
  //添加行  
  function AddRow(table, index){  
    var lastRow = table.rows[table.rows.length-1];  
    var newRow = lastRow.cloneNode(true);  
    <