JS使用DOM对元素进行添加和修改

最新推荐文章于 2022-07-21 16:30:22 发布

小小怪兽不挨打

最新推荐文章于 2022-07-21 16:30:22 发布

阅读量722

点赞数

分类专栏：学习杂记文章标签： js dom

本文链接：https://blog.csdn.net/u012668108/article/details/48183547

版权

学习杂记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

将select中的数据添加到table中，重复的则进行修改，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM添加和修改节点</title>
    <script language="JavaScript">
        function addLanguage(){
            //获取所有的td节点
            var tdNode = document.getElementsByTagName("td");
            //获取select选择的值
            var lan = document.getElementById("language").value;
            var exp = document.getElementById("experience").value;
            //是否新建节点，true则新建一组tr项，false则修改已存在的tr项
            var flag = true;
            //判断是否存在该节点
            for(var i = 0;i < tdNode.length;i++){
                //存在该节点，则执行下面的语句，修改其父节点的第二个子节点的文本节点
                if(lan == tdNode[i].firstChild.nodeValue){
                    tdNode[i].parentNode.childNodes[1].firstChild.nodeValue = exp;
                    //将标志位设置为false
                    flag = false;
                    break;
                }
            }
            //不存在该节点执行下面的语句
            if(flag) {
                //新建 语言 和 熟练度 的文本节点
                var lanElement = document.createTextNode(lan);
                var expElement = document.createTextNode(exp);
                //新建 语言 和 熟练度 的td节点
                var lanTdElement = document.createElement("td");
                var expTdElement = document.createElement("td");
                //新建 语言 和 熟练度 的tr节点
                var trElement = document.createElement("tr");
                //获取 表格 的节点
                var tab = document.getElementById("myTab");

                //将 语言 的文本节点添加到 语言的td 节点
                lanTdElement.appendChild(lanElement);
                //将 语言 的 td 节点添加到 tr 节点
                trElement.appendChild(lanTdElement);
                //将 熟练度 的文本节点添加到 熟练度的td 节点
                expTdElement.appendChild(expElement);
                //将 熟练度 的 td 节点添加到 tr 节点
                trElement.appendChild(expTdElement);
                //将 tr 节点添加到 table 节点
                tab.appendChild(trElement);
            }
        }
    </script>
</head>
<body>
    语言：
    <select id="language">
        <option>---请选择语言---</option>
        <option>中文</option>
        <option>英语</option>
        <option>日语</option>
        <option>韩语</option>
    </select>
    熟练度：
    <select id="experience">
        <option>---请选择熟练度---</option>
        <option>精通</option>
        <option>熟练</option>
        <option>一般</option>
        <option>不懂</option>
    </select>
    <button οnclick="addLanguage();">添加</button>
    <table id="myTab" border="1">
        <tr>
            <td>语言</td>
            <td>熟练度</td>
        </tr>
    </table>
</body>
</html>

小小怪兽不挨打

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS使用DOM对元素进行添加和修改

将select中的数据添加到table中，重复的则进行修改，代码如下： DOM添加和修改节点 function addLanguage(){ //获取所有的td节点 var tdNode = document.getElementsByTagName("td"); //获取s
复制链接

扫一扫