JavaScript实例--网页跳转下拉框-JS修改表格内容-JS下拉框加元素

爱被打了一巴掌 2023-10-06 18:31 19阅读 0赞

## 一、JavaScript实例 ##

### 1、需求：做一个下拉框，分别是河大，百度，京东—点按钮就直接跳转 ###

<body>
    <select name="" id="ws">
    		<option value="http://baidu.com">百度</option>
    		<option value="http://hbu.cn">河大</option>
    		<option value="http://jd.com">京东</option>
    </select>
    <script>
    //用的是window.open("http://hbu.cn")
    	var ws =document.getElementById("ws");
    	ws.onchange=function(){
          
    	//弹框alert(this.selectedIndex)
    	window.open(ws.options[this.selectedIndex].value)
    	//select.options[index]返回列表框，下拉菜单第index+1个选项
    	//selectedIndex返回下拉列表中选项的索引0-1-2
    	}
    </script>
    </body>

结果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTMwOTkxNQ_size_16_color_FFFFFF_t_70]

### 2、对一个表格进行某行某列元素样式内容修改 ###

<table id="ws">
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td>05</td>
                <td>06</td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td>05</td>
                <td>06</td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td>05</td>
                <td>06</td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td>05</td>
                <td>06</td>
            </tr>
        </table>
        更改第几行行 <input type="text" id="hang"><br>
        更改第几列<input type="text" id="lie"><br>
        输入内容 <input type="text" id="test">
        <input type="button" value="更改" id="btn">
        <script>
            var table = document.getElementById("ws")
            var hang = document.getElementById("hang")
            var lie = document.getElementById("lie")
                // console.log(lie)
            var text = document.getElementById("text")
            var btn = document.getElementById("btn")
                // var ws = table.rows[hang].cells[lie]
                // ws.style.color = "red";
                // ws.innerHTML = text.value
            btn.onclick = function() {
          
                var row = hang.value
                var cell = lie.value
                var content = test.value
                ws.rows[row - 1].cells[cell - 1].innerHTML = content
                ws.rows[row - 1].cells[cell - 1].style.color = "red"
            }
        </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTMwOTkxNQ_size_16_color_FFFFFF_t_70 1]

### 3、添加HTML元素+实例 ###

第一步：创建或复制节点  
第二步：添加节点

①、创建节点  
→document.createElement(Tag):创建Tag标签对应的节点。  
②、复制节点  
→Node cloneNode(boolean deep):复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点;当deep为 false时，表示仅复制当前节点。  
③、添加元素(通用方法)  
→appendChild(Node newNode):将newNode添加成当前节点的最后一个子节点。  
→insertBefore(Node newNode, Node reffNode):在refNode节点之前插入newNode节点。  
→replaceChild(Node newChild, Node oldChild):将oldChild节点替换成newChild 节点。

--------------------

在gs后面再加一个样式蓝，内容为”**全场包邮**“的内容

<div id="ws">
            <a>
                <h3>
                    gs
                </h3>
            </a>
        </div>
        <script>
            //创建html元素
            // var div = document.createElement("div");
            //复制html
            var ws = document.getElementById("ws")
            var div = ws.cloneNode(false);
            //处理html
            div.innerHTML = "qcby";
            div.style.color = "blue";
            div.className = "ws"
            console.log(div)
                //添加html元素
            document.getElementById("body").appendChild(div)
        </script>

![在这里插入图片描述][20210717231408805.png]![在这里插入图片描述][20210717231424275.png]

### 4、往下拉框中添加元素 ###

<input type="text" id="ws"><br>
        <input type="button" value="添加" id="btn">
        <select name="" id="select">
            <option value="">苹果</option>
        </select>
        <script>
            var ws = document.getElementById("ws")
            var btn = document.getElementById("btn")
            var selecte = document.getElementById("select")
            btn.onclick = function() {
          
           		 //按钮点击函数
                var option = document.createElement("option")
                var btn1 = ws.value;
                option.text = btn1
                select.add(option, null)
                ws.value = ""
            }
        </script>

![第一个][20210717230531718.png]![结果][20210717230605730.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTMwOTkxNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210717074927561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTMwOTkxNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTMwOTkxNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210717082936510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTMwOTkxNQ==,size_16,color_FFFFFF,t_70
[20210717231408805.png]: https://img-blog.csdnimg.cn/20210717231408805.png
[20210717231424275.png]: https://img-blog.csdnimg.cn/20210717231424275.png
[20210717230531718.png]: https://img-blog.csdnimg.cn/20210717230531718.png
[20210717230605730.png]: https://img-blog.csdnimg.cn/20210717230605730.png