js动态创建表格以及赋值

1.使用js动态创建表格

（1）不可编辑的表格

function creatTableA() {var tbody = document.querySelector('#tableA');for (var i = 1; i <= 59; i++) {var tr = document.createElement('tr');tbody.appendChild(tr);for (var j = 1; j <= 36; j++) {// 里面的for循环 td// 创建单元格var td = document.createElement('td');td.setAttribute("style", "width:40px");tr.appendChild(td);}//固定列设置颜色tbody.rows.item(i + 1).cells[0].style.color = 'red';tbody.rows.item(i + 1).cells[9].style.color = 'red';tbody.rows.item(i + 1).cells[18].style.color = 'red';tbody.rows.item(i + 1).cells[27].style.color = 'red';}
}

（2）可编辑的表格

function creatTableA() {var tbody = document.querySelector('#tableA');for (var i = 1; i <= 56; i++) {var tr = document.createElement('tr');tbody.appendChild(tr);for (var j = 1; j <= 36; j++) {// 里面的for循环 td// 创建单元格var td = document.createElement('td');// 把对象里面的属性值，给tdvar td = document.createElement('td');var input = document.createElement('input');//给每个input取name值input.name = i + '_' + j;//设置表格不可编辑//input.disabled = "disabled";//给不同列设置class属性，在css中使用if (j == 1 || j == 10 || j == 19 || j == 28) {input.setAttribute("class", "number");}tr.appendChild(td);td.appendChild(input);}}
}

2.动态赋值

（1）不可编辑的表格赋值，使用ajax获取数据，在success函数中根据数据类型赋值（List<Map<Integer, List<Integer>>>）

 $.ajax({type : 'POST',url : '',data : {starttime : starttime},error : function() {toastr.error('操作失败！');},success : function(data) {var tab = document.getElementById("tableA");for (var k = 0; k < data.length; k++) {for ( var key in data[k]) {var rownum = key;// console.log("rownum:" + rownum);var list = data[k][rownum];for (var i = 2; i <= 60; i++) {// console.log("rownum:" + rownum);tab.rows.item(i).cells[rownum - 1].innerHTML = list[i - 2];}}}}
}

（2）给可编辑的表格赋值

$.ajax({type : 'POST',url : '',data : {starttime : starttime},error : function() {toastr.error('操作失败！');},success : function(data) {for (var k = 0; k < data.length; k++) {for ( var key in data[k]) {var rownum = key;// console.log("rownum:" + rownum);var list = data[k][rownum];for (var i = 2; i <= 60; i++) {// 根据input框对应的name赋值$("[name='" + i + "_" + rownum + "']").val(list[i - 1]);}}}}
}

js动态创建表格以及赋值相关推荐

javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
javascript 动态创建表格：新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
动态创建表格给同一个标签创建点击事件,每个点击事件操作的元素不一样. 现在有这样的需求,点击"查看详细"显示或隐藏标签.要实现这样的效果就要给点击标签添加两个属性,一个属性是nam ...
js动态删除表格中的某一行
js动态删除表格中的某一行 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
js 动态创建table标签下的tr标签
使用JavaScript根据后台获取的数据进行创建table标签下的tr标签前端页面中的标签部分代码 <table class="layui-table lay-even" ...
FineUIMvc随笔（1）动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
在iView中动态创建表格
最近在使用iView中的表格组件时,碰到许多坑和疑惑,仔细研究了一下table组件,发现官方文档讲的不是很清楚,本文将介绍并使用table组件,做一个动态创建表格的demo,效果如下图. 一.在col ...
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...

js动态创建表格以及赋值

1.使用js动态创建表格

2.动态赋值

js动态创建表格以及赋值相关推荐

最新文章

热门文章