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

{% block javascripts %}

/**

* JS实现可编辑的表格

* 用法:EditTables(tb1,tb2,tb2,......);

**/

//添加行

functionAddRow(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="新建文件夹";//   

//console.log(newRow.cells[0].innerHTML);

SetRowCanEdit(newRow);returnnewRow;

}functionSetRowCanEdit(row){//console.log(row.cells.length);

for(var j=0;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].οnclick= function(){

EditCell(this);

}

}

}

}//设置指定单元格可编辑

functionEditCell(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;

}

}//为单元格创建可编辑输入框

functionCreateTextBox(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);

}

});

}

}

}

}//取消单元格编辑状态

functionCancelEditCell(element, value, text){

element.setAttribute("Value", value);if(text){

element.innerHTML=text;

}else{

element.innerHTML=value;

}

element.setAttribute("EditState", "false");//检查是否有公式计算

CheckExpression(element.parentNode);

}//清空指定对象的所有字节点

functionClearChild(element){

element.innerHTML= "";

}//提取指定行的数据，JSON格式

functionGetRowData(row){var rowData ={};for(var j=0;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"]);

returnrowData;

}//检查当前数据行中需要运行的字段

functionCheckExpression(row){for(var j=0;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);

}

}

}

}//计算需要运算的字段

functionExpression(row, expn){var rowData =GetRowData(row);//循环代值计算

for(var j=0;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, ""));

}

}returneval(expn);

}

$(function() {var tabProduct = document.getElementById("table2");//设置表格可编辑

//可一次设置多个，例如：EditTables(tb1,tb2,tb2,......)

//EditTables(tabProduct);

//console.log('test!!!!!!!!!!!!!!');

});

{% endblock %}