教学课件V2.0

教学课件V1.0

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

任务描述

对下图所示的页面中的表格进行操作，要求如下：

• 单击“增加一行”按钮，可以在书名为“60个瞬间”的所在行前插入一行，新插入行的价格一列居中显示

• 单击“删除第2行”按钮可把书名为“看得见风景的房间”一行删除。

• 单击“修改标题样式”按钮，可以设置标题行居中显示，字体加粗，单元格的背景颜色变为“#cccccc”。

• 单击“复制最后一行”按钮，复制书名为“60个瞬间”所在行，并且追加到表格的末尾

任务分析

    1.查找到对应节点

    2.使用createElement()方法新增节点，并将新增节点追加到页面

    3.使用removeChild()方法删除节点

    4.使用cloneNode()方法复制节点

    5.使用setAttribute()方法设置属性

任务实现

<scripttype="text/javascript">

function addRow(){       

varfRow=document.getElementById("row3");

varnewRow=document.createElement("tr") ;//创建行节点

varcol1=document.createElement("td");  //创建单元格节点

col1.innerHTML="幸福从天而降";           //为单元格添加文本

varcol2=document.createElement("td");

col2.innerHTML="&yen;18.50";

col2.setAttribute("align"，"center");

newRow.appendChild(col1);              //把单元格添加到行节点中

newRow.appendChild(col2);

document.getElementById("row3").parentNode.insertBefore(newRow，fRow);  //把行节点添加到表格末尾

        }

function updateRow(){

        varuRow=document.getElementById("row1");

        //标题行设置为字体加粗、文本居中显示，背景颜色为灰色

  uRow.setAttribute("style"，"font-weight:bold;text-align:center;background-color:#cccccc;");

        }

function delRow(){

        vardRow=document.getElementById("row2"); //访问被删除的行

         dRow.parentNode.removeChild(dRow);         //删除行

        }

function copyRow(){

        varoldRow=document.getElementById("row3"); //访问复制的行

        varnewRow=oldRow.cloneNode(true);          //复制指定的行及子节点

        document.getElementById("myTable").appendChild(newRow);//在指定节点的末尾添加行

        }

</script>

......

<input name="b1"type="button" value="增加一行"onclick="addRow()" />

<input name="b2"type="button" value="删除第2行"  onclick="delRow()"/>

<input name="b3"type="button" value="修改标题样式"  onclick="updateRow()"/>

<input name="b4"type="button" value="复制最后一行"  onclick="copyRow()" />

在页面中输入你的评论，单击“评论”按钮，如果留言区没有评论，则直接添加评论，如果留言区有评论，则将新的评论添加在留言区的最前面，如图所示。

参考答案