精华内容
下载资源
问答
  • 本文实例讲述了JavaScript 实现HTML DOM增删改查操作的常见方法。分享给大家供大家参考,具体如下:首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 ...

    本文实例讲述了JavaScript 实现HTML DOM增删改查操作的常见方法。分享给大家供大家参考,具体如下:

    首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查。

    1 查找DOM

    第一种方式是我们最常用的:通过ID查找:

    learn javascript

    你能找到我么?

    点击改变文本

    {{--js--}}

    function changeText(){

    document.getElementById("demo").innerHTML = "ok";

    }

    注意:当我们写HTML的时候尽量保证ID不重复。

    第二种方法:通过标签名查找

    learn javascript

    hi man

    点击改变文本

    {{--js--}}

    function changeText(){

    var element = document.getElementById("demo");

    var p = element.getElementsByTagName("p");

    p[0].innerHTML = "yo";

    }

    ↑ 我们取到了ID为demo的div,然后在div中有个p元素 没有ID属性,我们就可以通过tagname来找到它。

    第三种方法:通过class来查找

    learn javascript

    hi man

    点击改变文本

    {{--js--}}

    function changeText(){

    var element = document.getElementsByClassName("demo")[0];

    var p = element.getElementsByTagName("p");

    p[0].innerHTML = "yo";

    }

    2 删除DOM

    learn javascript

    hi man

    hello

    点击改变文本

    {{--js--}}

    function changeText(){

    var div1 = document.getElementById("div1");

    var p2 = document.getElementById("p2");

    div1.removeChild(p2);

    }

    3 新增DOM

    learn javascript

    hi man

    hello

    点击改变文本

    {{--js--}}

    function changeText(){

    // 创建P标签

    var p = document.createElement("p");

    // 创建文本节点

    var node = document.createTextNode("新的P标签");

    // 创建属性

    var attr = document.createAttribute("class");

    attr.value = "class p";

    // p标签中添加文本节点

    p.appendChild(node);

    // p标签中添加属性

    p.setAttributeNode(attr);

    var div = document.getElementById("div1");

    // 添加p标签

    div.appendChild(p);

    }

    4 修改DOM

    4.1 修改DOM的内容

    learn javascript

    hi man

    hello

    点击改变文本

    {{--js--}}

    function changeText(){

    var element = document.getElementById("p1");

    element.innerHTML = "更改内容";

    }

    4.2 修改DOM的属性

    learn javascript

    链接

    {{--js--}}

    var element = document.getElementById("link");

    element.href = "https://www.google.com";

    4.3 修改DOM的CSS样式

    learn javascript

    文本

    {{--js--}}

    var element = document.getElementById("p1");

    element.style.color = "red";

    感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

    希望本文所述对大家JavaScript程序设计有所帮助。

    展开全文
  • js数组定义 1.Array方法 1.第一定义方法 var arr = new Array(数值) // 数值为创建存储空间大小 arr[0] = 'a'; //[0]为数组下角标 arr[1] = 'b';...2.数组的增删改查 (1)增: var arr = ['a','b','c'] arr

    js数组定义

    1.Array方法

    1.第一种定义方法
    var arr = new Array(数值)  // 数值为创建存储空间大小
    arr[0] = 'a'; //[0]为数组下角标
    arr[1] = 'b';
    arr[2] = 'c';
    2.第二种定义方法
    var arr = ['a','b','c'];
    

    注:javaScript的数组很特殊,可以自动扩容;

    length属性:检测出一数组数量,可用于数组的遍历等~

    2.数组的增删改查

    (1)增:

    var arr = ['a','b','c']
    arr[1]='王5';
    
    1. push()方法:在数组最后一个添加参数,并隐含返回数组长度;
      用法: arr.push(‘小李’);//其中加’,'可插入多条数据

    2. unshift()方法: 在数组最前面添加参数,并隐含返回数组长度
      用法:arr.unshift(‘小李’); //其中加’,'可插入多条数据

    (2)删

    1.shift();方法:删除数组最前面的一条数据,并将删除的东西返回给我
    2.pop();方法: 删除数组最后面的一条数据,并将删除的东西返回给我
    3. splice()方法: 可删除 用法: splice (‘想删除的索引元素’,’删除的元素数量‘)

    (3)改

    1. splice()方法: 一次替换多个值 用法:arr.splice(|想更改的下角标|,|想替换的几个元素 如两个|
      ,‘替换内容1’,‘替换的内容2’)
    展开全文
  • JSJavaScript )实现增删改查

    千次阅读 2021-04-24 20:57:59
    JavaScript 实现简单增删改查 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta ...

    学习内容:

    需求

    用 JavaScript 实现简单增删改查
    实现代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>用户新增</title>
        <script>
            window.onload = () => {
                // 给获取的 id 添加点击事件
                // 添加用户
                document.getElementById("btn_submit").onclick = function () {
                    let username = document.getElementById("username").value;
    				console.log(username);
    				let email = document.getElementById("email").value;
                    let tel = document.getElementById("tel").value;
                    let tbody = document.getElementById("userTbody");
                    if (username !== null && username !== '' && username !== undefined) {
                        // 设置要插入的表格行信息
                        let tr = "<tr id=\"" + new Date().getTime() + "\">\n" +
                            "\t\t\t\t<td>" + username + "</td>\n" +
                            "\t\t\t\t<td>" + email + "</td>\n" +
                            "\t\t\t\t<td>" + tel + "</td>\n" +
                            "\t\t\t\t<td><a href=\"javascript:delRow('" + new Date().getTime() + "')\">删除</a></td>\n" +
                            "\t\t\t</tr>";
    
                        // 把新插入的行信息插入表格中
                        console.log(tbody.innerText);
                        console.log(tbody.innerHTML);
                        tbody.innerHTML += tr;
                    } else {
    					alert("姓名不能为空!");
    				}
    				// 添加信息之后把表单设置为空
    				document.getElementById("username").value = "";
    				document.getElementById("email").value = "";
    				document.getElementById("tel").value = "";
                };
    
                document.getElementById("btn_removeAll").onclick = () => {
                    var tbody = document.getElementById("userTbody");
                    tbody.innerHTML = "";
                };
            };
            // 删除用户
            function delRow(id) {
                let tr = document.getElementById(id);
                tr.parentNode.removeChild(tr);
            }
        </script>
    </head>
    <body>
    <form name="userForm">
        <center>
            用户录入<br/>
            用户名:<input id="username" name="username" type="text" size=15/>
            E-mail:<input id="email" name="email" type="text" size=15/>
            电话:<input id="tel" name="tel" type="text" size=15/>
            <input type="button" value="添加" id="btn_submit"/>
            <input type="button" value="删除所有" id="btn_removeAll"/>
        </center>
    </form>
    <hr/>
    <table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
        <thead>
        <tr>
            <th>用户名</th>
            <th>E-mail</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="userTbody">
        <tr id="tr1">
            <td>小肥羊</td>
            <td>wujizhang@163.com</td>
            <td>18212345678</td>
            <td><a href="javascript:delRow('tr1')">删除</a></td>
        </tr>
        </tbody>
    </table>
    </body>
    </html>
    

    总结:

    以上就是用 JS(JavaScript )实现增删改查的代码了,代码仅供参考,欢迎讨论交流。

    展开全文
  • 原生js 实现用户的增删改查function addList(){var oNum = document.getElementById('num').value;var oUser = document.getElementById('username').value;var oPwd = document.getElementById('pwd').value;var ...
    原生js 实现用户的增删改查

    function addList(){

    var oNum = document.getElementById('num').value;

    var oUser = document.getElementById('username').value;

    var oPwd = document.getElementById('pwd').value;

    var oBirth = document.getElementById('birth').value;

    var oAddre = document.getElementById('addre').value;

    var oTr = document.createElement('tr');

    var oTd1 = document.createElement('td');

    var oInput = document.createElement('input');

    oTd1.appendChild(oInput);

    oInput.setAttribute('type','checkbox');

    oInput.setAttribute('name','item');

    var oTd2 = document.createElement('td');

    oTd2.innerHTML = oNum;

    var oTd3 = document.createElement('td');

    oTd3.innerHTML = oUser;

    var oTd4 = document.createElement('td');

    oTd4.innerHTML = oPwd;

    var oTd5 = document.createElement('td');

    oTd5.innerHTML = oBirth;

    var oTd6 = document.createElement('td');

    oTd6.innerHTML = oAddre;

    var oTd7 = document.createElement('td');

    var oInput2 = document.createElement('input');

    var oInput3 = document.createElement('input');

    oInput2.setAttribute('type','button');

    oInput2.setAttribute('value','删除');

    oInput2.setAttribute('onclick','del(this)');

    oInput2.className = 'btn btn-danger';

    oInput3.setAttribute('type','button');

    oInput3.setAttribute('value','修改');

    oInput3.setAttribute('onclick','modify(this)');

    oInput3.className = 'btn btn-info';

    oTd7.appendChild(oInput2);

    oTd7.appendChild(oInput3);

    oTr.appendChild(oTd1);

    oTr.appendChild(oTd2);

    oTr.appendChild(oTd3);

    oTr.appendChild(oTd4);

    oTr.appendChild(oTd5);

    oTr.appendChild(oTd6);

    oTr.appendChild(oTd7);

    var olistTable = document.getElementById('listTable');

    olistTable.appendChild(oTr);

    }

    //删除数据

    function del(obj){

    var oParentnode = obj.parentNode.parentNode;

    var olistTable = document.getElementById('listTable');

    olistTable.removeChild(oParentnode);

    }

    //批量删除数据

    //全选

    function checkAll(c){

    var status = c.checked;

    var oItems = document.getElementsByName('item');

    for(var i=0;i

    oItems[i].checked=status;

    }

    }

    //delAll功能

    function delAll(){

    var olistTable = document.getElementById('listTable');

    var items = document.getElementsByName("item");

    for(var j=0;j

    if(items[j].checked)//如果item被选中

    {

    var oParentnode = items[j].parentNode.parentNode;

    olistTable.removeChild(oParentnode);

    j--;

    }

    }

    }

    //修改功能

    function modify(obj){

    var oNum = document.getElementById('num');

    var oUser = document.getElementById('username');

    var oPwd = document.getElementById('pwd');

    var oBirth = document.getElementById('birth');

    var oAddre = document.getElementById('addre');

    var oTr = obj.parentNode.parentNode;

    var aTd = oTr.getElementsByTagName('td');

    rowIndex = obj.parentNode.parentNode.rowIndex;

    oNum.value = aTd[1].innerHTML;

    oUser.value = aTd[2].innerHTML;

    oPwd.value = aTd[3].innerHTML;

    oBirth.value = aTd[4].innerHTML;

    oAddre.value = aTd[5].innerHTML;

    console.log(aTd[4].innerHTML);

    //alert(i);

    }

    //更新功能

    function update(){

    var oNum = document.getElementById('num');

    var oUser = document.getElementById('username');

    var oPwd = document.getElementById('pwd');

    var oBirth = document.getElementById('birth');

    var oAddre = document.getElementById('addre');

    var oMytable = document.getElementById('mytable');

    //alert(rowIndex);

    //var aTd = rowIndex.cells;

    console.log(oMytable.rows[rowIndex].cells)

    oMytable.rows[rowIndex].cells[1].innerHTML = oNum.value;

    oMytable.rows[rowIndex].cells[2].innerHTML = oUser.value;

    oMytable.rows[rowIndex].cells[3].innerHTML = oPwd.value;

    oMytable.rows[rowIndex].cells[4].innerHTML = oBirth.value;

    oMytable.rows[rowIndex].cells[5].innerHTML = oAddre.value;

    }

    选中编号姓名密码生日地址操作全部删除

    100806131234劈日e斩月1234561995-08-07北京市朝阳区艾欧尼亚

    新增数据

    编号
    姓名
    密码
    生日
    地址
    展开全文
  • Js实现简易的增删改查

    多人点赞 热门讨论 2021-04-22 01:16:14
    JavaScript实现简单增删改查工作,这个应该是多数Js初学者都比较棘手的一个问题 在下面我给大家写了一个简单的案例,该案例中没有实现增加操作,大家可以自己探索一下 html结构 在结构这里我们就是用一个表格简单...
  • 最近帮朋友弄一个简单的针对json数组的增删改成页面,正好涉及到了js去操作对象数组实现增删改查功能。我估计很多朋友应该也会遇到这类操作,所以记录一下以便分享。 2.数据准备 这里我就以学生对象数组为例了,其实...
  • 以下为通过JS对li标签进行简单的增删改查://定义变量,保存选中的标签var selectLi;//定义变量,保存修改了的标签var editedLi=false;window.onload=function(){//新增li标签到末尾document.getElementById(...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">......
  • 3、: localStorage的删除分为两:一是删除全部localStorage数据;一是删除localStorage中的某一条数据; //全部删除方法 window.localStorage.clear(); //删除某一条数据的方法: window.localStorage....
  • 现在在F盘有文件abc.mdf,表名为Student,一共2个字段,Id数字类型主键,stuName文本类型,现对该表进行增删改查的操作:1.查询数据查询var conn = new ActiveXObject("ADODB.Connection");conn.Open("DBQ=f:...
  • 文章目录一、增删改查方法1.1创建节点(增加)创建元素节点对象document.createElement()标签名作参数,并将对象返回创建文本节点对象document.createTextNode()文本内容作参数,根据内容创建文本节点举例://创建li...
  • 数组的增删改查操作

    2021-03-10 03:03:34
    做批量数据录入时须要对json内的数组进行增删改查操作,splice还是非常强大的记录一下用法。var lang = ["php","java","javascript"];//删除var removed = lang.splice(2,1);console.log(lang); //php,javascript//...
  • 说在前面的,写给小白白的,大神请绕道~今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作。首先,做一个表格,用来显示提交的数据,如图下:此处,我添加了编号、姓名、密码、生日、地址五个属性,...
  • 5.数据库的增删改查 6.完整代码 1.新建数据库user_login,创建数据表tb_user 2.在文件当前目录下载mysql模块 下载命令(前提是电脑安装了node.js): npm install mysql 3.引入mysql模块 /*引入mysql...
  • 使用python操作XML增删改查什么是XML?XML 指可扩展标记语言(EXtensible Markup Language)XML 是一标记语言,很类似 HTMLXML 的设计宗旨是传输数据,而非显示数据XML 标签没有被预定义。您需要自行定义标签。XML ...
  • Node.js官网 使用node -v(version)查看Node版本,确定是否安装成功 MySql官网 使用mysql -u 用户名 -p 密码查看MySql是否安装成功 NaviCat官网,Navicat是一个数据库可视化图形工具 然后创建一个空文件夹(我创建...
  • 第三步在main.js里面引入刚刚我们写好的src/mock/index.jsimport './mock' // simulation data 路径index.js可省略 至此整合完毕 相关文章: 相关视频: 以上就是Vue+Mock.js实现模拟表格增删改查详细步骤的详细...
  • 原生js 实现 增删改查

    2021-07-09 13:58:38
    } 2 function getParamsNew(key) { // URLSearchParams 是一个js的内置对象,可以用来出来search的查询条件 // 使用get方法可以获取指定的参数 varTEMData = newURLSearchParams(window.location.search);...
  • [Java教程]js实现表格的增删改查0 2017-01-12 00:06:43这份代码实现了对表格的增加,删除,更改,查询。点击一次添加按钮,表格会增加一行。点击重置按钮,输入框的内容会被清空。添加一行后,最后两格为更改和删除...
  • 增删改查的步骤.txt

    2021-04-19 08:16:46
    准备工作:安装wampserver,并执行SQL文件夹下的SQL语句,创建对应的数据库第一步:引入所有的JS文件,包括了bootstrap的CSS样式表格的样式JQ的文件angular的文件让angular支持动画操作angular路由的支持angular中...
  • 发现越来越难学 于是就决定用vue.js下面就介绍一下vue.js应用在表格里的增删改查首先引入一下element的js然后引入需要用到的vue相关的js文件下面先说一下html文件添加用户...
  • Springboot+Bootstrap实现增删改查实战

    千次阅读 多人点赞 2020-12-19 16:08:04
    最近有朋友问我有没有Springboot+Bootstrap实现增删改查的DEMO,当时没有,现在他来了! 实现效果 代码地址 https://gitee.com/indexman/bootstrap_curd 水平一般能力有限,觉得有用的朋友给我来个一键三连或捐助...
  • initial-scale=1.0"> <title>dom增删改查</title> </head> <style> *{ padding: 0; margin: 0; } li { list-style-type: none; } .main { display: flex; justify-content: center; align-items: center; margin-...
  • 原生js通过 id 查找 HTML 元素document.getElementById(id)通过标签名找到 HTML 元素document.getElementsByTagName(tagName)通过类名找到 HTML 元素document.getElementsByClassName(className)通过 ...
  • JSjs 如何实现对数据库的增删改查作者: 来源:www.28hudong.com2013-03-30 00:19:54阅读次JavaScript操作数据库JS操作Access数据库,跟其他语言操作差不多,总结了一下习惯代码,仅供参考学习。 现在在F盘有文件abc...
  • 数组的增删改查(原生JS) var Arr = [1, 2, 3, 4, 5, 6]; 查 //查 直接遍历数组,这里分别遍历一维数组和二位数组: // 一维数组 for (var i = 0; i < Arr.length; i++) { console.log(Arr[i]); } // ...
  • egg(八):配合前端vue实现表格的增删改查

    多人点赞 热门讨论 2021-10-11 17:53:45
    实现效果:增删改查 一、后端部分: (1)数据库: 新建一张表user,设置几个字段,效果如下: (2)egg逻辑部分: 提供的接口:http://localhost:7001/setUserList (3)egg具体实现步骤: 1、router.js中...
  • 最近在项目中需要连接数据库,做增删改查的功能,sql语句整理做了以下记录(基于NodeJs,注:data为你的真实数据):(一)新增插入表中数据:sql: 'insert into work(表名) (name,id,src) values(?,?,?);',values: [//...
  • NODEJS数据库增删改查

    2021-11-04 20:19:32
    // 当有了构造函数模型后,就可以使用构造函数对user集合的数据为所欲为,进行修改 // 增删改查 //添加数据 var admin = new User({ username: 'admin', password: '123456', email: 'admin@admin.com', }) admin....
  • vue实战(一):利用vue与ajax实现增删改查:var getUrl='${ctx}/distributor/getRate';var saveUrl= '${ctx}/distributor/saveRate';var rate = [];var vm ;var rates ='';$.ajax({url : getUrl,async : false,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,809
精华内容 27,123
关键字:

js增删改查的四种方法