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

2021/7/18 1:06:05

编程Tag： js 跳转 var 下拉框 ws div 节点 getElementById document

本文主要是介绍JavaScript实例--网页跳转下拉框-JS修改表格内容-JS下拉框加元素，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、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>

结果展示
在这里插入图片描述

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>

在这里插入图片描述

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>