python生成html表格、tr增加内容_Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹...

功能描述：

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

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

新建文件夹

{% if fileinfo.search_flag == 0 %} {{ fileinfo.file_name }} {% else %} {{ fileinfo.file_path }} {% endif %}

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

{% block style %} {% endblock %}

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

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

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

2.tabProduct获取自己table的id。

3.新增按钮οnclick="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", data:'', // processData:false, contentType:false, 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.最后，效果如下：