JS dom节点简单操作

最新推荐文章于 2024-08-15 23:54:05 发布

烂笔头NI

最新推荐文章于 2024-08-15 23:54:05 发布

阅读量398

点赞数

分类专栏： H5+CSS+JS 文章标签： javascript dom

本文链接：https://blog.csdn.net/github_38927899/article/details/77142360

版权

H5+CSS+JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JS dom节点简单操作

实现的功能：
1.添加图书到表格中
2.可以删除某一行
3.可以修改样式
4.复制最后一行添加到表格中

实现效果如图所示：
这里写图片描述
实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function $(str){//这里简单封装一下
            str=str.trim();
            if(str.length==0)return undefined;
            var result=undefined;
            if(str[0]=="#"){
                result=document.getElementById(str.replace("#",""));
            }else if(str[0]=="."){
                result=document.getElementsByClassName(str.replace(".",""));
            }else{
                result=document.getElementsByTagName(str);
            }
            return result;
        }
        function add_book(){//添加图书
            var b_name=prompt("请输入书名：");
            var b_price=prompt("请输入价格：");

            var table=$("table")[0].firstElementChild;
            var tr=document.createElement("tr");
            var td1=document.createElement("td");
            td1.innerText=b_name;
            tr.appendChild(td1);
            var td2=document.createElement("td");
            td2.innerText=b_price;
            tr.appendChild(td2);
            table.appendChild(tr);
        }
        function  del_two(){//删除第二行
            var table=$("table")[0].firstElementChild;
            var tr2=table.children[2];
            table.removeChild(tr2);
        }
        function  skin(){//更改标题样式
            var table=$("table")[0].getElementsByTagName("tr")[0];
            table.style.backgroundColor="black";
            table.style.color="#fff";
        }
        function  copy_last(){//复制最后一行
            var table=$("table")[0].firstElementChild;
            var last=table.children.length-1;
            var tr=table.children[last];
            var tr_last=tr.cloneNode(true);
            table.appendChild(tr_last);
        }
    </script>
</head>
<body align="center">
<table  border="1" align="center">
    <tr>
        <td width="200">书名</td>
        <td width="200">价格</td>
    </tr>
    <tr>
        <td>C从入门到住院</td>
        <td>78￥</td>
    </tr>
    <tr>
        <td>集思广益</td>
        <td>89￥</td>
    </tr>
    <tr>
        <td>大成java</td>
        <td>99￥</td>
    </tr>
    <tr>
        <td>大数据的智慧</td>
        <td>103￥</td>
    </tr>
    <tr>
        <td>语言的艺术</td>
        <td>98￥</td>
    </tr>
</table>
<hr>
<input type="button" onclick="add_book()" value="增加一行">
<input type="button" onclick="del_two()" value="删除第2行">
<input type="button" onclick="skin()" value="修改标题样式">
<input type="button" onclick="copy_last()" value="复制最后一行">
</body>
</html>
//注意：table 下的第一个孩子节点不是tr，而是tbody，下面才是tr，再下面是td