版本:
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"> {% 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);