第5章-DOM编程-任务3-使用HTML-DOM方式动态添加表格

任务描述单击“增加订单”按钮插入一行订单，当多次单击“增加订单”按钮时，可增加多行。单击“删除”按钮，可删除当前订单。演示任务3：使用HTMLDOM方式动态添加表格任务分析实现思路1.使用集合rows和属性length计算当前表格中的行数2.使用TableRow对象的属性id为当前插入的信行设置id3.使用insertCell()插入单元格，然后使用innerHTML为单元格添加内容4.删除当前行采用传递参数的方法，传递的参数为当前行的id5.使用rowIndex计算当前行在表格中的位置，然后使用deleteRow()删除当前行•掌握HTMLDOM操作方法HTMLDOM对象的属性访问functionchange(){varimgs=document.getElementById(s1);imgs.src=images/grape.jpg;}functionshow(){varhText=document.getElementById(s1).alt;alert(图片的alt是：+hText)}不再使用setAttribute（）/getAttribute（）方法简化为对象名.属性值进行读取或修改HTMLDOM的特有对象和操作思路分析1、使用CoreDOM标准操作获取表格对象2、使用HTMLDOM的table相关对象的属性、方法、事件操作表格HTMLDOM对象-table对象使用HTMLDOM如何实现？tableCell单元格对象表格相关对象表格相关对象table表格对象tableRow表格行对象类别名称描述属性rows[]返回包含表格中所有行的一个数组方法insertRow()在表格中插入一个新行deleteRow()从表格中删除一行……代码片段……tableObject.rows[]tableObject.insertRow(index)deleteRow(index)表格相关对象table表格对象示例……代码片段……tableRowObject.insertCell(index)tableRowObject.deleteRow(index)……表格相关对象tableRow表格行对象示例类别名称描述属性cells[]返回包含行中所有单元格的一个数组rowIndex返回该行在表中的位置方法insertCell()在一行中的指定位置插入一个空的td标签deleteCell()删除行中指定的单元格……代码片段……tableRowObject.insertCell(index)tableRowObject.deleteRow(index)……表格相关对象tableCell单元格行对象示例类别名称描述属性cellIndex返回单元格在某行单元格集合中的位置innerHTML设置或返回单元格的开始标签和结束标签之间的HTMLalign设置或返回单元格内部数据的水平排列方式className设置或返回元素的class属性functionaddRow(){varnewRow=document.getElementById(myTable).insertRow(2);varcol1=newRow.insertCell(0);col1.innerHTML=幸福从天而降;varcol2=newRow.insertCell(1);col2.innerHTML=¥18.5;col2.align=center;}用table对象重新实现表格操作实现“增加一行”的操作增加一个行对象，然后插入单元格，最后设置单元格内容functiondelRow(){document.getElementById(myTable).deleteRow(1);}functionupdateRow(){varuRow=document.getElementById(myTable).rows[0];uRow.className=title;}使用class样式属性直接修改标题样式用table对象重新实现表格操作实现“删除第2行”的操作实现“修改标题”的操作任务实现functionaddRow(){varaddTable=document.getElementById(order);varrow_index=addTable.rows.length-1;//新插入行在表格中的位置varnewRow=addTable.insertRow(row_index);//插入新行newRow.id=row+row_index;//设置新插入行的IDvarcol1=newRow.insertCell(0);col1.innerHTML=抗疲劳神奇钛项圈;……varcol4=newRow.insertCell(3);col4.innerHTML=“inputname=‘del”+row_index+“’type=‘button’value=‘删除’onclick=\”delRow(‘row“+row_index+”’)\“/“;}关键代码任务实现functiondelRow(rowId){varrow=document.getElementById(rowId).rowIndex;//删除行所在表格中的位置document.getElementById(order).deleteRow(row);}关键代码练一练将任务2，使用HTMLDOM方式实现。练习总结