输入行列，创建表格，并计算合计

要求

1. 在做如下操作前必须做基本的合法性校验，如果无效则给出合适的警告并返回不做下一步的操作
2. 创建表格时要判断行列数在1-10之间
3. 计算表格时要判断表格是否已经创建
4. 可以重复点击按钮做创建表格或计算表格等操作
5. 表格单元中的数字是一个1位及以内的随机非负整数，在单元格中右对齐
6. 在文本框中输入行数r、列数c（行列数在1到10之间，默认均5）
7. 点击“创建表格”按钮创建一个r+2行和c+2列的表格。该表格首行是表列头、尾行是合计行、首列是表行头、尾列是合计列
8. 点击按钮“计算合计”将计算行合计和列合计

实现

css

*{
		padding: 0;
		margin: 0;
	}
	tr,td{
		border: 1px solid grey;
	}
	td{
		text-align: center;
		line-height: 32px;
		width: 100px;
		height: 32px;
	}

HTML

<form id="doIt">
	<label for='rowCount'>表格行数</label><input type="text" name="rowCount" id="rowCount">
	<label for='colCount'>表格列数</label><input type="text" name="colCount " id="colCount">
	<input type="button" id="createTable" value="创建表格"/>
	<input type="button" id="copumteTable" value="计算合计"/>
</form>
<table id="Table201716080413"></table>

js（重点）

• 类似于jQuery，封装$函数

function $(id){
			return typeof id=='string'?document.getElementById(id):null;
		}

• 用闭包创建表格对象

//块级作用域，减少全局的变量，方法数目
(function inner(){
	function Table(node,rowCount,colCount){
		// 保证作用域安全的构造
		if(!(this instanceof Table)){
			return new Table(node,rowCount,colCount);
		}
		this.node=node;
		this.rows=rowCount;
		this.cols=colCount;
	}

	// 创建表格
	Table.prototype.createTable=function(){
		for(var i=0;i<this.rows+2;i++){
			var tr=document.createElement('tr');
			for(var j=0;j<this.cols+2;j++){
				var td=document.createElement('td');
				if(i==0){
					if(j==0){
						td.innerText="";
					}
					else if(j==this.cols+1){
						td.innerText="行合计";
					}
					else{
						td.innerText="第"+j+"列";
					}
				}
				else if(i==this.rows+1){
					if(j==0){
						td.innerText="列合计";
					}
				}
				else{
					if(j==0){
						td.innerText="第"+i+"行";
					}
					else if(j==this.cols+1){
						td.innerText="";
					}
					else{
						td.innerText=parseInt(Math.random()*10);
					}
				}
				td.id="t_"+i+"_"+j;
				tr.appendChild(td);
			}
			this.node.appendChild(tr);
		}
	}

	// 计算表格
	Table.prototype.computeTable=function(){
		var data=[];			// 总数据
		var col=[];				// 列和
		var row=[];				// 行合
		var sum=0;				// 总和
		for(var i=1;i<=this.rows;i++){
			data[i]=[];
			for(var j=1;j<=this.cols;j++){
				data[i][j]=parseInt($('t'+"_"+i+"_"+j).innerText);
				sum+=data[i][j];
			}
		}
		for(i=1;i<=this.rows;i++){
			var temp=0;
			for(j=1;j<=this.cols;j++){
				temp+=data[i][j];
			}
			row[i]=temp;
		}
		for(j=1;j<=this.cols;j++){
			var temp=0;
			for(i=1;i<=this.rows;i++){
				temp+=data[i][j];
			}
			col[j]=temp;
		}
		for(j=1;j<=this.cols;j++){
			$('t'+"_"+parseInt(this.rows+1)+"_"+j).innerText=col[j];
		}
		for(i=1;i<=this.rows;i++){
			$('t'+"_"+i+"_"+parseInt(this.cols+1)).innerText=row[i];
		}
		$('t_'+parseInt(this.rows+1)+'_'+parseInt(this.cols+1)).innerText=sum;
	}

	// 清空表格
	Table.prototype.empty=function(){
		while(this.node.hasChildNodes()){
			this.node.removeChild(this.node.firstChild);
		}
	}

	// 判断表格是否为空
	Table.prototype.isEmpty=function(){
		if(this.node.hasChildNodes()){
			return false;
		}
		return true;
	}

	// 构造函数全局化
	window.Table=Table;
})();

• 监听事件

var table=new Table($('Table'));//初始创建一个为0,0的全局table对象
// 监听点击创建
$("createTable").addEventListener('click',function(){
	table.empty();
	var rowCount=parseInt($('rowCount').value)||5;
	var colCount=parseInt($('colCount').value)||5;
	// 输入必须为数字
	if(!isNaN(rowCount)&&!isNaN(colCount)&&rowCount<=10&&rowCount>=1&&colCount>=1&&colCount<=10){
				$('myTable').style.border="1px solid grey";
				table=new Table($('myTable'),rowCount,colCount);//更新全局对象
				table.createTable();
			}
			else{
				alert("请输入数字(1-10)");
			}
		},false);
		// 监听点击计算
		$("copumteTable").addEventListener('click',function(){
			if(table.isEmpty()){
				alert("表格未创建，不能算合计");
			}
			else{
				table.computeTable(myTable);
			}
		},false);

创建一个表格，每一个 td 都设置一个id属性，根据这个id来得到这一些表格里的值和写入计算的值。