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，名称就是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实现了。