动态创建随机表格及合计

最新推荐文章于 2021-06-01 00:18:36 发布

micro_fancy

最新推荐文章于 2021-06-01 00:18:36 发布

阅读量213

点赞数

分类专栏： web 文章标签： html jquery

本文链接：https://blog.csdn.net/qq_42677329/article/details/90632117

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

动态创建随机表格及合计

html+jquery

效果图
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态网页创建</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js-->
 //jquery推荐百度，不建议谷歌（不稳定）
 
 <script>
  $(document).ready(function (){
   	$(":button").on('click',function(){
    		alert("ok!");
  	 });
  });
 </script>
 
 <script>
  <!-- 类似全局变量的声明 -->
 var FLAG = false;
 var FIRSTFLAG = false;
 var rows = 0, cols = 0;  
 var sum2 = new Array();
 var sum3 = new Array();
 var tab = document.createElement("table");
 
  <!-- 创建 --> 
    function creatTab(){
	  rows = document.getElementById('rows').value;
	  cols = document.getElementById('cols').value;
	  div_ = document.getElementById('201739160412');
	  
	  if(rows%1!=0||rows<1||rows>=10){
	   alert("行数必须是1-10之间的整数");
	   return;
	  }
	  else if(cols%1!=0||cols<1||cols>=10){
	   	alert("列数必须是1-10之间的整数");
	   	return;
	  }
	  var ta=div_.getElementsByTagName('table')[0];
          if (ta){
  		 ta.parentNode.removeChild(ta);
  	  }
  
   
  	tab = document.createElement("table");
        tab.width = 100;
	tab.height = 36;		
  	tab.border = 4;
	tab.style = 'text-align:right';
	  
	  for(var i = 0;i < 9; i++){
		 sum2[i] = 0;
		 sum3[i] = 0; 
	  }
	  
	var arr = new Array();
        for(var i = 0;i <= Number(rows)+1; i++){
        	tab.insertRow(i);
   		arr[i] = new Array();
            for(var j = 0;j <= Number(cols)+1; j++){  
    		if(i==0 && j==0){
     			tab.rows[i].insertCell(j).innerHTML = '';
   		 }
    		else if(i==0 && j==Number(cols)+1){ 
    		        tab.rows[i].insertCell(j).innerHTML = '行合计';
    		}
    		else if(j==0 && i==Number(rows)+1){
    			 tab.rows[i].insertCell(j).innerHTML = '列合计';
    		}
        	else if(i==0){
    			 tab.rows[i].insertCell(j).innerHTML = '第' + j + '列';
    		}
   		 else if(j==0){
     			tab.rows[i].insertCell(j).innerHTML = '第' + i + '行';
   		 }
    		else if(j==Number(cols)+1){
     			tab.rows[i].insertCell(j).innerHTML = '';
    		}
   		 else if(i==Number(rows)+1){
     			tab.rows[i].insertCell(j).innerHTML = '';
    		}
   		 else {
     			arr[i][j] = Math.floor(Math.random() * 10);
    			 tab.rows[i].insertCell(j).innerHTML = arr[i][j]; 
    			 sum2[i] += arr[i][j];
   		 }
               }
       	 }
  
  	for(var i = 1;i <= cols; i++){
            for(var j = 1;j <= rows; j++){
    		sum3[i] += arr[j][i];
   	     }
  	}
    
        document.getElementById("201739160412").appendChild(tab);
 	 FLAG = true;
 	 FIRSTFLAG = false;
 	 <!-- window.alert("test"); -->
  
   	 }
     
	 <!-- 合计 --> 
	 function countSum(){
	   if(FIRSTFLAG == true){
	   	alert("尚未创建表格，无法合计！");
	  	 return;
	  }
	  if(FLAG == false){
	  	 alert("已经计算过了！");
	    	return;
	  }
	  <!-- window.alert(Number(rows)+1); -->
	  var sum = 0;
	  for(var i = 1;i <= rows; i++){
	   	tab.rows[i].cells[Number(cols)+1].innerHTML=sum2[i];
	  	 sum += sum2[i];
	  }
	  
	  for(var i = 1;i <= cols; i++){
	   	tab.rows[Number(rows)+1].cells[i].innerHTML=sum3[i];
	  }
	  
	  tab.rows[Number(rows)+1].cells[Number(cols)+1].innerHTML = sum;
	  
	  FIRSTFLAG = true;
	 }
    </script>
</head>
<body>
    行数 <input type = "text" value = "" id = "rows">
    列数 <input type = "text" value = "" id = "cols">
    <input type = "button" value = "创建表格" onclick = "creatTab()" class = "cx">
     <input type = "button" value = "计算表格" onclick = "countSum()" class = "cx">
    <div id = "201739160412"></div>
</body>
</html>