My12306 Project日志——JavaScript动态表格

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


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


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

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

<pre name="code" class="html"><button type="button" onclick="addRow(5)">增加</button><button id="delete" type="button" onclick="doDelete()">删除</button><button id="update" type="button" onclick="doUpdate(this)">修改</button><button id="submit" type="button" onclick="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，名称就是divtr.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就是将这个列的内容显示为ivar 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实现了。