js创建元素笔记

最新推荐文章于 2025-03-01 19:48:24 发布

原创最新推荐文章于 2025-03-01 19:48:24 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#J#

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的动态展示周数据分析的方法。该方法通过AJAX获取后台数据，并动态生成HTML表格来显示特定周的数据详情。同时，实现了当选择不同周次时清除前一次加载的数据并加载新数据的功能。


function showAreaData(weekId){

				var currTR = event.srcElement.parentNode;

				if(hasData==true && lastCell == weekId){

					for(var s = 1 ; s <= n ; s ++){
						currTR.parentNode.removeChild(currTR.nextSibling);
					}
					hasData = false;

				}else{
					if(hasData == true && lastCell != weekId){
						for(var s = 1 ; s <= n ; s ++){
							lastTR.parentNode.removeChild(lastTR.nextSibling);
						}
						hasData = false;
					}
					var productType = form.productType.value;
					var businessType = form.businessType.value;
					var serviceLevel = form.serviceLevel.value;
					var customGroup = form.customGroup.value;
					var areaId = form.areaNo.value;

					//alert(areaId+" "+weekId+" "+productType+" "+businessType+" "+serviceLevel+" "+customGroup);

					var xmlhttp = createXHR();
				  	xmlhttp.onreadystatechange = function(){
				  		if(xmlhttp.readyState == 4){
					        if(xmlhttp.status == 200){
					        	var responseText = xmlhttp.responseText;

					        	var trs = responseText.split("<tr>");

					        	for(var i = 1 ; i < trs.length; i ++ ){
					        		n = i;
					        		var tr = trs[i].split("</tr>")[0];
					        		//alert(tr);
					        		var tds = tr.split('<td>');
					        		//创建tr
					        		var trNode = document.createElement("<tr id='TR_"+weekId+""+i+"' style='display:block;'></tr>");

					        		for(var j = 1 ; j < tds.length; j ++){
					        			var td = tds[j].split("</td>")[0];
					        			//alert(td);
					        			//创建td并添加到tr
					        			var tdNode = document.createElement("<td align='right'></td>");
					        			tdNode.innerHTML = td;
					        			trNode.appendChild(tdNode);
					        		}
					        		//追加tr
					        		currTR.parentNode.insertBefore(trNode,currTR.nextSibling);
					        	}
					        }
			    		}
				  	}

				    var URL = "TotalAnalysisWeek.action?flag=getAreaData&weekId="+weekId+"&productType="+productType
				    	+"&businessType="+businessType+"&serviceLevel="+serviceLevel+"&customGroup="+customGroup
				    	+"&areaId="+areaId;

				    xmlhttp.open("post",URL,false);

				    xmlhttp.send(null);

					hasData = true;
					lastCell = weekId;
				}
				lastTR = currTR;
			}