在做Excel上传时,考虑到使用asp编程语言时需要先上传后,再读取,再者asp很多年没有开发了。所以使用前端js技术 xlsx.core.min.js 来读取excel文件并上传。在读取excel数据后,需要动态添加在页面上添加 input,然后提交获取值。

一、JS动态添加节点

1、创建节点为变量:var tr = document.createElement('tr');

2、往节点添加文本内容:tr.innerHTML = ''+ value.id +'

3、把新创建的节点添加到父节点身上: tbody.appendChild(tr);

实例:其中 dataSource 为二维数组


for(var i=0;i<dataSource.length;i++) {
  if(i==0){
    var tr = document.createElement('tr');
    for(var j=0;j<dataSource[0].length;j++) {
      tr.innerHTML += '<td>'+ dataSource[0][j]['name'] +'</td>';
    }
    tr.innerHTML += '</tr>';
    document.getElementById("tableView").appendChild(tr);
  } else {
    var tr = document.createElement('tr');
    for(var j=0;j<dataSource[i].length;j++) {
      let td = '';
      td = '<td><input type="text" name="orderImport[o_dim]" ';
      td += ' value="'+ dataSource[i][j]['name'] +'" /></td>';
      tr.innerHTML += td;
    }
    tr.innerHTML += '</tr>';
    document.getElementById("tableView").appendChild(tr);
  }
}

二、js节点操作

A:动态创建节点的三种方法:

1、document.write()。注意:页面文档流加载完毕,再调用就会导致页面重绘

2、element.innerHTML 将内容写入某个dom节点,不会导致页面重绘

3、document.createElenent() 创建多个元素

B:添加和删除节点方法

1、element.appendChild(),将节点添加到指定父节点的子节点的末尾,什么什么之后类似于push()添加数组元素的方法

2、element.insertBefore(节点,指定预插入的位置),将节点添加到指定父节点的指定子节点的前面,什么什么之前类似于unshift()方法;

3、element.removeChild(删的节点)用于删除节点,并且会返回一个值