今天我们来说说何如使用HTML DOM 操作表格。以下纯属个人观点，以今天的课堂练习为例子

<table border="0" cellspacing="0" cellpadding="0" id="order">
  <tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>价格</td>
    <td>操作</td>
  </tr>
  <tr id="tr1">
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>&yen;568.50</td>
    <td><input name="rowdel" type="button" value="删除"  onclick="del('tr1')"/>
	<input name="rowde2" type="button" value="修改" onclick="up('tr1')"/></td>
  </tr>
  <tr>
    <td colspan="4" style="height:30px;">
    <input name="addOrder" type="button" value="增加订单" onclick="add()"/></td>
  </tr>
</table>

如上图所示：这里我们就不展示如何制作table表格的样式了。我们要做的要求就是，点击增加就增加新的一行，删除是一样的点击后删除一整行，修改我们这里做的是修改数量的值。我们先制作如何删除一行。首先要明白我们删除一行是依据id来删除一行的，我们先在下面代码中设置删除的事件。代码如下：

 <tr id="tr1">
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>&yen;568.50</td>
    <td>
        <input name="rowdel" type="button" value="删除"  onclick="del('tr1')"/>
	<input name="rowde2" type="button" value="修改" onclick="up('tr1')"/>
    </td>
  </tr>

上面的代码大家都应该很熟悉了，但是在input中设置了一个点击事件(onclick="del('tr1')"),再来写js样式。

代码如下：

<script type="text/javascript">
    //删除
    function del(tid){
		var tr=document.getElementById(tid);
		tr.parentNode.removeChild(tr);
	}
</script>
	

写一个带参的方法，先根据id来获取要删除的对象，在用这个对象点出父节点再点出删除子节点来删除自己，删除就算完成了。再来讲何如制作增加一行。一样的也需要写一个方法，代码如下：

<script type="text/javascript">
   
//增加
function add(){
var table=document.getElementById("order"); //第1行
var index=table.rows.length-1; //第2行
var tr=table.insertRow(index); //第3行
var tid="tr"+index; //第4行
tr.id=tid; //第5行
var td1=tr.insertCell(0); //第6行
td1.innerHTML="耐克球鞋"; //第7行
var td2=tr.insertCell(1); //第8行
td2.innerHTML="8"; //第9行
var td3=tr.insertCell(2);//第10行
td3.innerHTML="&yen288.8"; //第11行
var td4=tr.insertCell(3); //第12行
td4.innerHTML="<input type='button' value='删除' onclick=\"del('"+tid+"')\"/> <input type='button' value='修改' onclick=\"up('"+tid+"')\"/>";//第13行
}
</script>

看上面的代码，首先我们要先根据id获取表格这个对象如上图第1行，获取表格对象后再来获取要插入的位置，我们要插入的位置一直都得在增加订单的上面，那如何才能插入到这个位置，首先我们先获取行数的长度再减个1就是我们要插入的位置了。代码如上图第2行。获取位置之后在插入就是了代码如上图第3行，行tr有了，我们在来获取td，获取td后在给td赋值，代码如上图第6-13行。在第13行我们要在添加行的同时把事件也添加进去。添加的时候我们同样的也要添加一个id，删除和修改都是根据id来的，添加id代码如上图第4-5行。做到这里我们的添加也制作成功了。添加成功如下图：

最后来看修改吧，修改我们做的是修改数量的值，点击修改的同时按钮要变成确定且事件也要变成确定事件的方法，点击确定后又变回修改按钮且事件也要变回修改事件的方法。说这么多我们来看代码吧，代码如下：

<script type="text/javascript">
        //修改
	function up(tid){
		var tr=document.getElementById(tid).cells;//获取tr下td的集合
		var num=tr[1].innerHTML;//获取数量
		tr[1].innerHTML="<input size='1' value='"+num+"'>";//把文本内容变成输入框 且原值显示出来
		tr[3].lastChild.value="确定"; // 获取tr下的集合位置为3的最后一个儿子的值
		tr[3].lastChild.setAttribute("onclick","qd('"+tid+"')");//改变值的同时也要改变事件的方法
	}
	//确定
	function qd(tid){
		var tr=document.getElementById(tid).cells;//获取tr下的集合
		var num=tr[1].firstChild.value;  //获取tr下的集合下标为1的td的值
		tr[1].innerHTML=num; //上面获取的值变成文本内容
		tr[3].lastChild.value="修改"; // 获取tr下的集合位置为3的最后一个儿子值
		tr[3].lastChild.setAttribute("onclick","up('"+tid+"')");
	}
</script>
	

到这我们制作就完成了。来看看整体的效果。如下图：