JS操作图片(增,删,改) 例子

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    Image
    {
        width:100px;
        height:100px;
        }
    </style>

<script type="text/javascript">

function chuangjian() {

//添加图片

var array = ['1.jpg',
            '2.jpg',
            '3.jpg',
            '4.jpg',
            '5.jpg',
            '6.jpg',
            '7.jpg',
            '8.jpg',
            '9.jpg',
            '10.jpg',
            '11.jpg',
            '12.jpg',
            '13.jpg',
            '14.jpg',
            '15.jpg'
            ];
            //alert(array.length);
            var tablenode = document.createElement('table');
            var tbody = document.createElement('tbody');
            tablenode.setAttribute('width', '600px');
            tablenode.setAttribute('height', '400px');
            tablenode.setAttribute('border', '2px');
            var count = 0;
            for (var i = 0; i < 3; i++) {
                var trnode = document.createElement('tr');
                for (var j = 0; j < 5; j++) {
                    var tdnode = document.createElement('td');
                    var imgnode = document.createElement('img');
                    imgnode.setAttribute('src', 'picture/' + array[count]);
                    tdnode.appendChild(imgnode);
                    trnode.appendChild(tdnode);
                    count++;
                }
                tbody.appendChild(trnode);
            }
            tablenode.appendChild(tbody);
            document.body.appendChild(tablenode);
        }

//    1.将第2行第4列的图片替换成你自己的图片，不要使用setAttribute

function tihuan() {
            var pnode = document.createElement('img');
            pnode.setAttribute('src', 'images/2.jpg');
            var oldnode = document.getElementsByTagName('img')[8];
            oldnode.parentNode.replaceChild(pnode, oldnode);
            var oldnode = document.createElement('img');
        }

//    2.删除第3行第2列的图片

function shanchu() {
            var oldnode = document.getElementsByTagName('img')[11];
            oldnode.parentNode.removeChild(oldnode)
        }
    </script>
</head>
<body>
<input type="button" value="创建相册" onclick="chuangjian();" />
<input type="button" value="替换图片" onclick="tihuan();" />
<input type="button" value="删除节点" onclick="shanchu();" />
</body>

</html>

点击创建相册所呈现页面

点击替换图片，替换指定位置的图片

点击删除节点，删除指定位置的图片的节点

赞 (0)

相关推荐

  • JS操作图片(增,删,改) 例子

    JS操作图片(增,删,改) 例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></titl

  • javascript js 操作数组 增删改查的简单实现

    函数定义 Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }

  • Python3操作MongoDB增册改查等方法详解

    MongoDB是由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活. 在这一节中,我们就来看看Python 3下MongoDB的存储操作. 1. 准备工作 在开始之前,请确保已经安装好了MongoDB并启动了其服务,并且安装好了Python的PyMongo库. 2. 连接MongoDB 连接MongoDB时,我们需要使用PyMongo库里面的MongoClient.一般来说,传入Mong

  • oracle监控某表变动触发器例子(监控增,删,改)

    使用oracle触发器 实现对某个表的增改删的监控操作,并记录到另一个表中. 代码: 复制代码 代码如下: create or replace trigger test_trigger    before insert or update or delete on test_table    for each row  declare    v_id        varchar2(30);    v_bdlb      varchar2(1);    v_jgdm      VARCHAR2(

  • 简单的php数据库操作类代码(增,删,改,查)

    数据库操纵基本流程为: 1.连接数据库服务器 2.选择数据库 3.执行SQL语句 4.处理结果集 5.打印操作信息 其中用到的相关函数有 •resource mysql_connect ( [string server [, string username [, string password [, bool new_link [, int client_flags]]]]] ) 连接数据库服务器•resource mysql_pconnect ( [string server [, strin

  • node.js操作mysql(增删改查)

    最近这段时间研究Node感觉不错,自己做了一个增删改查,虽然有些简陋,但是思想是想通的,其实所有项目都是增删改查,有助于初学者快速掌握Node  首先 本实例展示的是基于Node+Express+node-mysql快速搭建的一套增删改查,视图模板是jade,基本上都是现在能用的到的技术,市面上的实例也特别少,有用的又不新,所以自己写一个  基本工作 首先我们准备一些基本的,因为我是用mysql麻烦可以自己装一下mysql,去官网可以下各种操作系统的安装包. 实例就一张表,下面是这张表的建表语句

  • javascript操作xml(增删改查)例子代码hta版

    包括了stu.hta(是HTML应用程序);      stu.xml 注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!! 文件stu.hta代码如下: 复制代码 代码如下: <html> <head> <title> 数据岛的显示 </title> <style type="text/css"> #findPanel { position:absolute; widt

  • Struts2实现CRUD(增 删 改 查)功能实例代码

    Struts2实现CRUD(增 删 改 查)功能实例代码

    CRUD是Create(创建).Read(读取).Update(更新)和Delete(删除)的缩写,它是普通应用程序的缩影.如果您掌握了某框架的CRUD编写,那么意味可以使用该框架创建普通应用程序了,所以大家使用新框架开发OLTP(Online Transaction Processing)应用程序时,首先会研究一下如何编写CRUD.这类似于大家在学习新编程语言时喜欢编写"Hello World". 本文旨在讲述Struts 2上的CRUD开发,所以为了例子的简单易懂,我不会花时间在数

  • 使用DataTable更新数据库(增,删,改)

    1.修改数据 复制代码 代码如下: DataRow dr = hRDataSet.Tables["emp"].Rows.Find(textBox3.Text);            //DataRow dr = hRDataSet.Tables["emp"].Select("id="+textBox3.Text)[0];            dr.BeginEdit();            dr["name"] = t

  • Python Web后端开发中的增查改删处理

    Python Web后端开发中的增查改删处理

    目录 前言 一.创建 mgr应用目录 二.添加处理请求模块 和 url 路由 2.1定义函数 1.新建customer文件,定义dispatcher函数 2.总路由文件 bysms/urls.py 中定义 3.mgr下添加 urls.py 路由文件 三.列出客户 四.添加客户 五.临时取消 CSRF 校验 六.修改客户信息 七.删除客户 八.和前端集成 前言 如果采用前后端分离的架构开发, 后端几乎不负责任何展现界面的工作,只负责对数据进行管理 . 数据的管理,主要就是:响应前端的请求, 对数据

随机推荐