My12306 Project日志——JavaScript动态表格

      学习完JSP的大部分内容，现在开始做一个类似12306的一个购票和管理系统。之前做过一个简单的购物系统，以为这个也挺简单的。做了4天之后，发现并不是这样，涉及到页面之后，很多东西一下子复杂了起来，特别是页面的实现部分，有很多是已学过的无法解决的。所以总结一下这些问题。


      第一个解决的大问题，用了将近10个小时。实现查询之后页面上动态出现查询的内容，并以表格形式出现，在表格上实现点击删除、修改之后，可以对查询出的数据进行操作。


      此问题其实是拆分成三部分。
      1、动态增加   2、动态删除    3、动态修改并提交

页面部分如下，只拷贝了body体内的部分，上面4个按钮是测试用，只能实现静态的内容，如果要动态增加数据，需要用form实现，那个很简单了，注意增加按钮实际使用时应该是一个“查询”按钮，每次点击时都会向服务器请求数据，刷新页面。目前没有刷新页面，所以多次点击之后，再进行其他的测试会不准确，即测试时只点击一次即可。

<pre name="code" class="html"><button type="button" οnclick="addRow(5)">增加</button>
<button id="delete" type="button" οnclick="doDelete()">删除</button>
<button id="update" type="button" οnclick="doUpdate(this)">修改</button>
<button id="submit" type="button" οnclick="doSubmit(this)" disabled="disabled">确认</button>

<table id="showData" width="2000" border="1" cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<th>选择</th>
			<th>行号</th>
			<th>车站编码</th>
        	<span style="white-space:pre">	</span><th>车站名称</th>
        	<span style="white-space:pre">	</span><th>车站缩写</th>
		</tr>
	</thead>
	<tbody id="t_body">
	</tbody>
	<tfoot>
	</tfoot>
</table>

      1、动态增加部分 此部分算是最简单的了，代码如下，目前没有跟Servlet联动，传入的都是静态数据，这个到时候通过session获取值即可。

<script language="javascript" type="text/javascript">
function $(id){   //用这种方法来简化后续的代码
	return document.getElementById(id);	
}

function addRow(row){//传入的row值由Servlet中select count得到，就是查询之后一共多少个数据
	var t_body=$("t_body");
	for(var i=1;i<=row;i++){//循环，具体添加几行数据
		var tr=document.createElement("tr");//创建对象，名称为tr，此名称即为我们在页面上需要创建的标签类型，例如创建各种框和按钮，名称就是input，                                                <span style="white-space:pre">		</span>创建一个div，名称就是div
		tr.setAttribute("id","r_"+i);//设置这个对象的属性和值，前面这两行实现效果即为<tr id="r_"+i>
		var td_1=document.createElement("td");
		var checkBox=document.createElement("input");
		checkBox.type="checkbox";
		checkBox.name="station_check";
		checkBox.value=i;//以上4行实现的效果即为<input type="checkbox" name="station_check" value=i>
		td_1.appendChild(checkBox);//在父元素中增加一个子元素对象，效果就是在td_1这个列中增加 一个复选框
		var td_2=document.createElement("td");
		td_2.innerHTML=i;//此行为序号，innerHTML就是将这个列的内容显示为i
		var td_3=document.createElement("td");
		td_3.innerHTML="50";//属性1，从数据库中通过Servlet和Session获取对象，通过JSP实现显示，此处的属性对应就是实例对象的属性，也就是你希望查询后<span style="white-space:pre">					</span>显示的内容。目前填的是测试数据
		var td_4=document.createElement("td");
		td_4.innerHTML="100";//属性2，同上
		var td_5=document.createElement("td");
		td_5.innerHTML="150";//属性3，显示属性结束
		tr.appendChild(td_1);
		tr.appendChild(td_2);
		tr.appendChild(td_3);
		tr.appendChild(td_4);
		tr.appendChild(td_5);//将这些列的子元素添加到行中
		t_body.appendChild(tr);//将行的子元素添加到表中，这种添加的顺序必须是由小到大。
	}
}

2、删除部分，最初遇到的问题就是选取表格中的行和列对象时出现了一些阻碍，当时误以为动态生成的对象的id无法用getParameter获取到，导致后面出现了很多浪费时间的地方。最终确认，是可以获取到的！！

function doDelete(){ //删除行的方法
	var t_body=$("t_body");
	var trArray=t_body.childNodes;//取得行的子元素，是一个数组
	var r=confirm("是否删除数据");//点击之后弹出确认的提示框
	if(r==true){//如果选择确认
		for(var i=trArray.length-1;i>=0;i--){//从后往前删除,i从1开始，因为thead也算一行。如果从前往后删，由于是一行行删除的，每次删除之后后面的行<span style="white-space:pre">							</span>号都会-1.所以选择多个行时再删除，会出现问题，即某些行删不掉。
			var tdArray=trArray[i].childNodes;//取得列的子元素数组
			var check=tdArray[0].childNodes;//取得列的第一格的子元素数组，此数组中只有一个内容。就是复选框对象
			if(check[0].checked==true){	 //如果复选框对象被选中
				var row=$(trArray[i].getAttribute("id"));//取得此行的对象
				var index=row.rowIndex;//获取此行的下标值
				$("showData").deleteRow(index);//删除
				//这后面可以加入与Servlet的联动，即这里删除后同时删除数据库中的内容
			}
		}
	}
}

3、修改部分和提交部分

function doUpdate(obj){
	var t_body=$("t_body");
	var trArray=t_body.childNodes;
	if(trArray.length<=1){//如果行少于1个，就是只有头部，不操作，避免没数据的时候点击修改出现问题
		return;
	}
	for(var i=1;i<trArray.length;i++){
		var tdArray=trArray[i].childNodes;
		var check=tdArray[0].childNodes;	
		if(check[0].checked==true){	
			obj.disabled="disabled";//禁用修改按钮，因为在已经可以修改的状态下再次点击修改，会再次将文本框内的东西给替换		
			var btnSub=$("submit");	//启动确认按钮
			btnSub.disabled=false;
			for(var j=2;j<tdArray.length;j++){//从2开始，序号无需变更				
				var text=document.createElement("input");//创建文本框对象				
				text.type="text";
				text.id="text_"+j;				
				text.value=tdArray[j].innerHTML;			
				tdArray[j].innerHTML="";	//将原先的值清除
				tdArray[j].appendChild(text); 	//替换为文本框
				
			}	
		}
	}
}

function doSubmit(obj){	
	var t_body=$("t_body");
	var trArray=t_body.childNodes;	
	for(var i=1;i<trArray.length;i++){
		var tdArray=trArray[i].childNodes;
		var check=tdArray[0].childNodes;	
		if(check[0].checked==true){	
			for(var j=2;j<tdArray.length;j++){//从2开始，序号无需变更
				var t=$("text_"+j);
				tdArray[j].innerHTML=t.value;
<span style="white-space:pre">				</span>//此处再增加一些JSP语句使提交给Servelt联系起来
			}
		}
	}
	obj.disabled="disabled";
	var btnUpdate=$("update");
	btnUpdate.disabled=false;	
}

这只是查询了大量的知识之后自己摸索着实现的，应该后续还有更为简单的实现方式，例如用JQuery或者什么的，因为没学那些，只能先这样纯用JavaScript实现了。