烂笔头NI
烂笔头NI

JS dom节点简单操作

JS dom节点简单操作

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

实现效果如图所示：
JS dom节点简单操作_第1张图片
实现代码：


<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>大成javatd>
        <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

你可能感兴趣的:(H5+CSS+JS)

  • 如何用H5+CSS+JS写一个简单的招聘网站 猿码叔叔 前端javascriptcss
    大家好，我是猿码叔叔，一个Java语言开发者。应网友要求，写一个简单的招聘页面。由于技术原因，页面相对简单，朋友们可以选择性的阅读，如果对您有帮助，也可直接拿去使用，因为接下来除了闲言碎语还有源代码干货。一、内容介绍这个简单的招聘网站，具备简单的响应式功能。页面元素包含：横向菜单、职位搜索与选择、简历表格、轮播图。页面没有实现与后端交互的功能，后续有需要可以更新，包括更丰富的功能都可以持续更新与扩
  • H5+CSS+JS基础知识回顾(一) 宁缺勿滥不忘初心
    半个暑假贡献给了电子设计竞赛，半个暑假用来好好学C语言了，刚开学趁着没课，简单回顾下入门不久就告了一段落的H5+CSS+JS一、首先来回忆下H5,CSS,JS的关系：1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称
  • H5+CSS+JS:框架 iframe mjhap 前端
    内联框架xxxxxx.html文件在project中代码：框架framea.htmlTitleFrameA呵呵frameb.htmlTitleFrameBframec.htmlTitleFramC
  • H5+css+js的商品放大镜效果 tmoonlee 效果
    放大镜*{margin:0;padding:0}body{width:100%;height:5000px;}#demo{display:block;width:400px;height:255px;margin:50px;position:relative;border:1pxsolid#ccc;}#small-box{position:relative;z-index:1;}#float-bo
  • H5+CSS+JS:块元素 mjhap 前端
    块元素H5块元素块元素在显示时，通常会以新行开始如：、、内联元素内联元素通常不会以新行开始如：、、元素元素也被称为块元素，其主要是组合HTML元素的容器元素元素是内联元素，可作为文本容器块元素span{color:chartreuse;}大家好大家好这是一个加重标签！HelloWorld!HelloShangHai!测试段正常段mycss.css:#dividp{color:blue;}
  • H5+css+js一个简单的图书管理系统 ah_ty 作业HTML5Js
    一个简单的网页图书管理系统，不同的权限登陆显示不同的内容，界面做了一点点的美化1登录注册，默认有三个人员信息，可以注册，也可以直接登录（弹窗提示用户，是登录还是注册）2登录后展示所有列表，包括图书的（编号，书名，作者，出版时间，书的数量），以及借阅按钮，点击按钮可以实现借阅，数量-13提供录入按钮点击后对图书信息进行录入，录入的时候需要查重，如果已经存在了则只需要累加数量4添加录入权限，只有管理员
  • Android中Xposed框架篇---利用Xposed框架实现拦截系统方法 师太，老衲把持不住了
    原创2016-10-20北京猿人编码美丽编码美丽编码美丽微信号jiangwei0910410003功能介绍介绍编码相关的技术知识，主要包括：Android和iOS两个平台内容，还会介绍前端技术包括H5+CSS+JS等，同时也会涉及到脚本语言Python的知识，同时也会介绍一些关于App设计相关的UI知识！点击顶部蓝字"编码美丽"关注公众号Xposed框架真的很好玩，特别是在写游戏外挂以及给微信写外
  • 前端学习笔记 基础 Chrome与IDEA的使用 大熊软糖M 前端学习笔记
    参考视频：【极客学院】Web前端开发教学-第一部分：H5+CSS+JS文章目录Chrome检查功能适配移动端的预览直接运行Web源文件IDEA获得学生版intellijideaultimate创建HTML5项目更改快捷键设置系统快捷键的使用自动补全快速注释快速复制ChromeChrome是谷歌的浏览器，有很多实用的功能。检查功能Web浏览器都提供查看源代码功能，Chrome检查可以看更多的内容，例
  • 前端学习笔记 HTML5 基础内容 大熊软糖M 前端学习笔记
    参考视频：【极客学院】Web前端开发教学-第一部分：H5+CSS+JS参考文档：HTML教程W3school文章目录关于HTML与HTML5元素，标签和属性块元素与内联元素HTML5空文档标签简介h1~h6：标题p：段落a：锚使用a标签做页内跳转img：图片a和img的嵌套使用br：换行span：内嵌文字div：划分属性简介body标签的bgcolor属性：背景颜色a标签的target属性：指定打
  • 前端学习笔记 HTML5 新特性 大熊软糖M 前端学习笔记
    参考视频：【极客学院】Web前端开发教学-第一部分：H5+CSS+JS参考文档：HTML教程W3school文章目录XHTML规范HTML5语法变化HTML5元素与属性变化新增的元素废除的元素新增的属性废除的属性HTML5新特性详解全局属性contentEditabledesignModehiddenspellchecktabindex新增元素：article新增元素：section新增元素：na
  • 前端学习笔记 CSS 基础内容 大熊软糖M 前端学习笔记
    参考视频：【极客学院】Web前端开发教学-第一部分：H5+CSS+JS参考文档：CSS教程W3school文章目录概述HTML引入CSS外部引入内部引入内联引入语法形式继承选择器通配符关系：分组选择器关系：派生(后代)选择器元素选择器id选择器类(class)选择器属性(值)选择器子元素选择器相邻兄弟选择器样式计量单位背景文本字体链接列表表格轮廓定位定位浮动常用操作对齐尺寸显示盒子模型四部分内容详
  • H5+css+js实现tab栏切换1 今夕今年 前端
    *{margin:0px;padding:0px;list-style:none;}.tab-box{width:383px;margin:10px;border:1pxsolid#ccc;border-top:2pxsolid#206F96;}.tab-head{height:31px;}.tab-head-div{width:95px;height:30px;float:left;border
  • Android系统篇之----Binder机制和远程服务调用机制分析 师太，老衲把持不住了
    原创2016-09-12北京猿人编码美丽编码美丽编码美丽微信号jiangwei0910410003功能介绍介绍编码相关的技术知识，主要包括：Android和iOS两个平台内容，还会介绍前端技术包括H5+CSS+JS等，同时也会涉及到脚本语言Python的知识，同时也会介绍一些关于App设计相关的UI知识！点击顶部蓝字"编码美丽"关注公众号一、前景概要最近要实现Android中免注册Activity
  • 情人节-动态爱心（h5+css+js） ______狼族 html
    一、效果图二、源代码*{padding:0;margin:0;}html,body{height:100%;padding:0;margin:0;background:#000;}canvas{position:absolute;width:100%;height:100%;}.aa{position:fixed;left:50%;bottom:10px;color:#ccc}/**Setting
  • 一些面试点 leesen
    简述性能优化-交换两个变量的值，不使用第三个变量的四种法方-iOS面试题-2019.上-iOS开发——BAT面试题合集（持续更新中）-做了5年iOS，靠着这份面试题跟答案，我从12K变成了30K-iOS面试题大全--（附答案）-其他：uniapp自学笔记（一）uniapp：基于vue的全端解决方案-安卓基础知识-H5+CSS+JS基础知识回顾(一)-
  • H5标签回顾与整理(一) sophies
    半个暑假贡献给了电子设计竞赛，半个暑假用来好好学C语言了，刚开学趁着没课，简单回顾下入门不久就告了一段落的H5+CSS+JS一、首先来回忆下H5,CSS,JS的关系：1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称
  • w3c h5 + css + js笔记 denggun12345 jshtmlcss
    公司电脑：/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js 「1.js基础/css基础/html基础  w3schoolhttps://www.w3school.com.cn/js/index.asp  菜鸟https://www.runoob.com/js/js-tutorial.html   注意点    cssflex布局      实例h
  • 最简单的弹一弹小游戏 起風、
    最近弹一弹小游戏很火，分享一个自制的最简单的弹一弹小游戏！！声明一下：该游戏使用H5+CSS+JS制作，功能简单，纯属娱乐，点开网页即可畅玩！！首先，是整个界面的布局：弹一弹分数：0可以说没一点技术含量了，会一点点前端的就能看懂。接着是CSS：#tit{width:500px;height:40px;margin-top:-20px;}#tit.p1{font-size:30px;color:bl
  • html5+CSS3+JS实现七夕言情功能代码 佚名
    因为今天8月28日就是中国的情人节—七夕，作为程序猿一枚的我就只有在家敲代码咯！但我还是有一颗脱单的心；制作了h5+css+js界面祝小伙伴们：七夕快乐具体的功能有：1.下雪的背景动画2.下面的文字逐字显示，并伴有语音3.中部的图片3d轮播附上源码:七夕快乐*{margin:0;padding:0;}html,body{width:100%;height:100%;}body{background
  • 集合框架 天子之骄 java数据结构集合框架
       集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
  • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
    实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
  • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
    1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
  • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
            面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
  • linux网口绑定 被触发 linux
    刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
  • XML基础语法 肆无忌惮_ xml
    一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
  • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
    @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
  • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
    原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
  • 输入两个整数， 计算百分比 alleni123 java
    public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
  • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
        对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
  • linux下tomcat开机自启动 bijian1013 tomcat
    方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
  • spring aop实例 bijian1013 javaspringAOP
    1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
  • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
    enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
  • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
    包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
  • shell脚本批量检测端口是否被占用脚本 ronin47
    #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
  • java-2.设计包含min函数的栈 bylijinnan java
    具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
  • Netty源码学习-ChannelHandler bylijinnan javanetty
    一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
  • java生成随机数 cngolon java
    方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
  • POI读写海量数据 ctrain 海量数据
    import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
  • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
    日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
  • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
      在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
  • android欢迎界面淡入淡出效果 dcj3sjt126com android
    很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
  • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
    转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
  • Android 应用程序发送shell命令 gqdy365 android
    项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
  • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
    java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
  • Firebase 相关文章索引 justjavac firebase
    Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
  • C++学习重点 lx.asymmetric C++笔记
    1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
  • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
    这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
  • C 语言初级 位运算 1140566087 位运算c
    第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
  • 14点睛Spring4.1-脚本编程 wiselyman spring4
    14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他