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');
			// 把对象里面的属性值，给td
			var 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]);
				    }
				}
		  }
	}
}