任务视频V2.0

任务视频V1.0

知识点

访问HTML DOM对象的属性

由于HTML中的每个节点都是一个对象，所以访问或设置对象的属性值时，可以不使用getAttribute()和setAttribute()方法，而是直接使用“对象名.属性”的方法对对象的属性值进行访问和修改。

表格对象

在HTML DOM中有专门用来处理表格及其元素的属性和方法，Table对象、TableRow对象和TableCell对象的属性和方法。                 

² rows[]返回表格中所有行（TableRow对象）的一个数组。语法为：

        tableObject.rows[]

² insertRow()方法用于在表格中的指定位置插入一个新行，语法为：

        tableObject.insertRow(index)

index表示新行将被插入到index所在行之前。若index等于表格的行数，则新行将被插入到表格的末尾；若index等于0，则新行将被插入到表格的第一行，因此index不能小于0或大于表格中的行数。

² deleteRow()方法用于从表格中删除指定位置的行，语法为：

        tableObject.deleteRow(index)

        参数index是小于表格中所有行数的证书，当index等于0时，表示删除第一行。

教学课件V2.0

教学课件V1.0

HTML DOM方式实现动态添加表格

任务描述

在如图所示的页面基础上增加订单和删除行，单击“增加订单”按钮插入一行订单，当多次单击“增加订单”按钮时，可增加多行。单击“删除”按钮，可删除当前订单。

任务分析

1. 使用集合rows和属性length计算当前表格中的行数，由于表格行的rowIndex是从0开始的，并且我们每次插入的新行都在“增加订单”按钮所在行之前，因此当前插入行的位置应该是表格行数减1，关键代码如下所示：

     varaddTable=document.getElementById("order");

     varrow_index=addTable.rows.length-1;

2. 使用TableRow对象的属性id为当前插入的信行设置id

3. 使用insertCell()插入单元格，然后使用innerHTML为单元格添加内容

4. 删除当前行采用传递参数的方法，传递的参数为当前行的id

5. 使用rowIndex计算当前行在表格中的位置，然后使用deleteRow()删除当前行

任务实现

<scripttype="text/javascript">

function addRow(){

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

  var row_index=addTable.rows.length-1;       //新插入行在表格中的位置

  var newRow=addTable.insertRow(row_index);  //插入新行

  newRow.id="row"+row_index;                 //设置新插入行的ID

  var col1=newRow.insertCell(0);

  col1.innerHTML="抗疲劳神奇钛项圈";

  var col2=newRow.insertCell(1);

  col2.innerHTML=row_index;

  var col3=newRow.insertCell(2);

  col3.innerHTML="&yen;49.00";

  var col4=newRow.insertCell(3);

  col4.innerHTML="<input name='del"+row_index+"'type='button' value='删除' onclick=\"delRow('row"+row_index+"')\" />";

        }

function delRow(rowId){

        varrow=document.getElementById(rowId).rowIndex;  //删除行所在表格中的位置

        document.getElementById("order").deleteRow(row);

        }

</script>

将任务2，使用HTML DOM方式实现。

参考答案