DOM编程2-重要案例!!!

2.操作表格.

2.1表格对象的属性和方法.

---

2.2表格行对象的属性和方法.

---

2.3表格单元格对象的属性和方法.

---

3.案例演示.

3.1表格案例.

3.1.1修改标题样式.

---

3.1.2在表格末尾追新增一行.

---

3.1.3删除第二行.

---

3.1.4复制最后一行.

---

订单案例.

3.2.1增加行.

• 思路分析：

1)、先通过表格id获取要操作的表格：

var myTable = document.getElementById("order");

2)、在表格的最后一行的位置增加一行，那么表格原先的最后一行(“增加订单按钮”)就会被挤到下一行(首先要获取表格最后一行的下标，因为往表格里面插入行是通过下标插入，表格最后一行的下标等于表格总行数减1，所以首先要先获取表格的总行数)：

var rindex = myTable.rows.length-1;

3)、然后给新增的行里面增加列。注意：在这里每行有四列，前三列里面都是一个文本框，第四列里面是两按钮(第一个是删除按钮，第二个是确定和修改合二为一的按钮，一开始显示的是确定按钮，当点过确定之后再变为修改按钮)：

// 第0列,里面是个文本框

var r0 = newRow.insertCell(0);

r0.innerHTML = "<input type='text'/>";

// 第1列,里面是个文本框

var r1 = newRow.insertCell(1);

r1.innerHTML = "<input type='text' style='width:20px'/>";//第1列和第2列文本框的宽度比较窄，所以要设宽度值为20px

// 第2列,里面是个文本框

var r2 = newRow.insertCell(2);

r2.innerHTML = "<input type='text' style='width:20px'/>";//第1列和第2列文本框的宽度比较窄，所以要设宽度值为20px

// 第3列,里面是两个按钮，第一个是删除，第二个是确定和修改合二为一的按钮，一开始默认的显示是“确定“。

var r3 = newRow.insertCell(3);

r3.innerHTML = "<input type='button' value='删除'/>&nbsp;<input type='button' value='确定'/>";

---

3.2.2删除行.

• 思路分析：

首先，删除行是通过表格对象的deleteRow(index)方法删除，该方法里面要传入要删除的行的下标。现在有如下三个问题需要解决：

问题一：如何获取要删除的行的下标？

表格行对象有个rowindex属性：返回该行在表中的下标。rowindex属性要通过行对象(也就是要删除的行)来调用，但是如何来获取要删除的行呢？

问题二：如何获取要删除的行对象？

可以直接通过行id获取该行对象，所以在删除行的方法里面传个行id参数。但是，如何给动态新增的行设置id属性？

问题三：如何给动态新增的行设置id属性

该案例里面现有行的id属性值的组成格式是：row+行下标，我们也按照这样的格式给动态新增的行设置id属性值。在什么时候给动态新增的行设置id属性呢？在增加行的同时就给行设置一个id属性。所以要在“增加行”功能方法addRow()里面给新增加的行设置id属性，如：newRow.id = 'row'+rindex;//给新增加的行设置id属性(值：row+当前行的下标).

• 如何在动态新增的删除按钮里面调用删除方法？在增加行方法 addRow()里面的删除按钮里面调用，如：

---

3.2.3确定功能.

• 实现思路：

确定是用来保存修改后的值：把值从文本框里面获取到(在修改内容时候是在文本框里面进行修改的)然后再保存到对应的列里面。首先通过行id获取要修改的行(那确定方法也要带一个行id参数)，然后再获取该行前三列内文本框的值，最后再把获取的文本框的值保存到列里面。

• 如何在动态新增的确定按钮里面调用确定方法？在增加行方法 addRow()里面的确定按钮调用，如：

---

3.2.4修改功能.

• 实现思路：

修改和确定正好相反，确定是先获取文本框的值然后赋到单元格里面，而修改则是先获取单元格里面的值然后赋给文本框。修改完成后，按钮又要由“修改”变为“确定”，并且添加事件调用确定方法。

---