添 删 改 查

最新推荐文章于 2022-12-21 02:12:52 发布
最新推荐文章于 2022-12-21 02:12:52 发布
阅读量313 收藏
点赞数
文章标签： div function button input null border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pubuzhaxi2006/article/details/6442036
版权

 

<html>

 

<head>

<style type="text/css">

    label{

        border:1px solid;

        width :70px ;

        height :25px ;

    }

</style>

<script type="text/javascript">

    var div1;

    var div2;

    var div3;

    var div4;

    var in1;

    var nameText;

    var ageText;

    var sexText;

    var in2;

    var in3;

    var in4;

    var in5;

    window.onload = function(){ 

        div1 = document.getElementById('div3');

        in1 = document.getElementById('in1');

        in2 = document.getElementById('in2');

        in3 = document.getElementById('in3');

        in4 = document.getElementById('in4');

        in5 = document.getElementById('in5');

        nameText=document.getElementById('nameText');

        ageText=document.getElementById('ageText');

        sexText=document.getElementById('sexText');

        var divList = div1.getElementsByTagName('div');

for(var i=0;i<divList.length;i++){

divList[i].onclick = function(){

divClick(this);

}

}

    }

     var temp = null;

function divClick(ff){

if(temp !=null){

temp.style.backgroundColor="white";

}

ff.style.backgroundColor='blue';

temp=ff;

in2.disabled=false;

in3.disabled=false;

var labels=temp.getElementsByTagName('label');

nameText.value=labels[0].innerHTML;

ageText.value=labels[1].innerHTML;

sexText.value=labels[2].innerHTML;

}

function  create(){

        var newDiv=document.createElement('div');

        var  newLabel=document.createElement('label');

        var  newLabe2=document.createElement('label');

        var  newLabe3=document.createElement('label');

        newLabel.innerHTML =nameText.value;

        newLabe2.innerHTML =ageText.value;

        newLabe3.innerHTML=sexText.value;

        newDiv.appendChild(newLabel);

        newDiv.appendChild(newLabe2);

        newDiv.appendChild(newLabe3);

        return newDiv;

    }

    function add(){

        var newDiv=create();

        div1.appendChild(newDiv);

        newDiv.οnclick=function(){

            divClick(this);

        }

        clears();

    }

    function del(){

        div1.removeChild(temp);

        in2.disabled=true;

        clears();

    }

    function reset(){

        var newLabels=create();

        div1.replaceChild(newLabels,temp);

        in3.disabled=true;

        newLabels.οnclick=function(){

            divClick(this);

        }

        clears();

    }

   function delall(){

while(div1.hasChildNodes()){

div1.removeChild(div1.firstChild);

}

}

var divList=null;

function finds(){

        divList=div1.getElementsByTagName('div');

        for(var i=0;i<divList.length;i++){

          var newLabel = divList[i].getElementsByTagName('label');

                var age=newLabel[1].innerHTML;

                if(age<=20){

                divList[i].style.display='none';

            }

        }

    }

    function clears(){

        nameText.value='';

        ageText.value='';

        sexText.value='';

    }

    function sort(){

        var tep=null;

        var labels=null;

        var labels1=null;

        var age2=null;

        var age1=null;

        var ageList = document.getElementById('div3');

        var ages = ageList.getElementsByTagName('div');

        for(var i=0;i<ages.length-1;i++){

            labels=ages[i].getElementsByTagName('label');

            age1=labels[1].innerHTML;

            for(var j=i+1;j<ages.length;j++){

                labels1=ages[j].getElementsByTagName('label');

                age2=labels1[1].innerHTML;

                if(age1<age2){

                    ageList.insertBefore(ages[j],ages[i]);

                    age1 = age2;

                }

            }  

        } 

    }                          

       </script>

       <head>

       <body>       

    <div id="div1" style="border:1px solid;width:212pxdiv;height:200px;float:left;overflow-y:scroll;">

        <div id="div2">

            <div style="float:left;border:1px solid ;width:70px;height:25px;" >姓名</div>

            <div style="float:left;border:1px solid ;width:70px;height:25px;" οnclick="sort();">年龄</div>

            <div style="float:left;border:1px solid ;width:70px;height:25px;">性别</div>

        </div>

        <div id="div3" style="clear:left;">

            <div><label>马子</label><label>24</label><label>男</label></div>

            <div><label>马大子</label><label>13</label><label>男</label></div>

            <div><label>狂人</label><label>20</label><label>女</label></div>

            <div><label>马大哈</label><label>34</label><label>男</label></div>

            <div><label>马嘛</label><label>18</label><label>男</label></div>

            <div><label>玛玛字</label><label>12</label><label>男</label></div>

            <div><label>石头</label><label>21</label><label>男</label></div>

            <div><label>走了</label><label>28</label><label>男</label></div>

        </div>

    </div>

    <div id="div4" style="border:1px solid;width:300px;height:200px; float:left;">

        姓 名:<input type="text" id="nameText"/><br>

        年 龄:<input type="text" id="ageText"/><br>

        性 别:<input type="text" id="sexText"/><br>

        &nbsp;&nbsp;<input type="button" value="添加" οnclick="add();" id="in1"/>

        <input type="button" value="删除" οnclick="del();" disabled="true" id="in2"/>

        <input type="button" value="修改" οnclick="reset();" disabled="true" id="in3"/><br>

        <br>

        &nbsp;&nbsp;<input type="button" value="查询" οnclick="finds();" id="in4"/>

        <input type="button" value="删除所有" οnclick="delall();" id="in5"/> 

    </div>

 

</body>

 

</html>

 

pubuzhaxi2006
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
增删改查
月亮投递员的博客
05-20 2069
MVC版的增删改查以及通用分页前言核心思路：最终效果:总结： 前言 嘿嘿，愉快的码砖过程来了，今天打算和大家分享一下怎样实现增删改查以及前段时间学习时用到的通用分页，想知道怎么实现吗？那我就来告诉你！ 核心思路： 增删改查呢，用到了之前学过的三层架构，使用了三层架构，能够明确分工，因为三层架构之间互不干扰，各司其职。 1、首先第一步：在你的数据库表中创建好你需要的表格以及添加好数据(我这里呢，用的是t_solr_job表格，数据是我自己添加好的)； 2、当你弄好了数据库表中的数据之后，可打开
最基本必会的增删改查
m0_50374211的博客
03-01 7472
最基本必会的增删改查
sql添删改查
weixin_45414738的博客
06-01 167
#查询 select * from sys_user; #添加 insert into sys_user(username,`password`,phone,create_time) values('tom','123456','18306500667','2021-6-1') #修改 update sys_user set username='admin',phone='13386459867' where user_id = 1 #删除 delete from sys_user where us
SSH框架实现添删改查的详细步骤及其原理(傻瓜教程)
qq_52506111的博客
12-21 1247
JavaEE框架技术之SSH框架，详细教程，傻瓜式教程
数据库的添删改查
05-29
C#窗体的添删改查。功能实现。 可用于作业
数据库的基础增删改查SQL语句
梦缘的博客
02-17 10万+
数据库的基础增删改查SQL语句
简单spring增删改查
11-19
简单spring增删改查 #db connection parameters driver=oracle.jdbc.driver.OracleDriver url=jdbc:oracle:thin:@localhost:1521:xe user=system pwd=cs2513179 # datesource parameters initsize=1 maxsize=3
Java宠物商店(增删改查)
04-19
Java宠物商店增删改查,常用的增删改查的实现之dao层,宠物信息：宠物ID，宠物类别，宠物名字，宠物性别，宠物年龄，宠物入库日期 ,这是前几天的习题,是一个宠物管理系统,就是对宠物的信息进行管理的一套系统宠物信息...
实现部门员工管理增删改查员工的
11-12
"实现部门员工管理增删改查"的系统设计与实现，旨在帮助初学者理解和掌握基础的编程逻辑以及数据库操作技术。这个小代码资源是为初学者量身定制的，旨在通过实践来提升他们的编程技能。 首先，我们要理解“增删改查...
Laravel框架实现model层的增删改查(CURD)操作示例
10-18
在Laravel框架中，Model层是负责处理与数据库交互的核心部分。它提供了简便的方法来执行CRUD（创建、读取、更新和删除）操作。在这个示例中，我们将深入理解如何在Laravel的Model层中实现这些基本操作。...
WinForms C# Access 实现 添 删 改 查
03-27
总结来说，"WinForms C# Access 实现 添 删 改 查"项目是一个基础的数据库应用开发示例，它涵盖了C#编程、WinForms UI设计、数据库操作以及异常处理等多个关键知识点。通过这个项目，开发者可以学习如何在.NET环境中...
javascript操作表格（二）
IT 乞丐
06-19 140
appendChild()方法 我就直接贴代码了，大家去研究，时间紧，哈哈，见谅~   例一：   &lt;html&gt; &lt;head&gt; &lt;title&gt;My Test Page&lt;/title&gt; &lt;script type="text/javascript"&gt; &lt;!-- var textNumber = 1; ..
一个命令搞定Java Web通用添删改查及分页代码生成(音视频)
蔡世友-重出江湖
06-27 3051
　　RoR可以一个命令生成添删改查，曾经让我们有点震惊。其实Java也末尝不可，以前做J2EE开发中，就经常用工具生成各种各样的代码。而现在我们稍作调整就可以生成超轻量级的快速应用代码。　　Rails框架是基于Ruby语言，Ruby语言虽然号称在日本发展十年了，但其应用实践我们能看到的或者是我们能看懂的还不是很多。而EasyJWeb框架是基于Java语言，Java在应用实践这一块的优势就很
实例教程六：创建数据库与完成数据添删改查--第一种写法
Android小子的博客笔记
07-17 638
短信小助手（附源码）http://www.eoeandroid.com/thread-207835-1-1.html 备忘录+SQLite的实现http://www.eoeandroid.com/thread-208013-1-1.html 音乐波形图http://www.eoeandroid.com/thread-207796-1-1.html <manifest xmlns
SQL语句的增删改查（详细）
热门推荐
08-31 28万+
一、增：有2种方法 1.使用insert插入单行数据：          语法：insert [into] [列名] values 　　 例：insert into Strdents (姓名,性别,出生日期) values ('王伟华','男','1983/6/15')
数据库的增删改查篇
m0_65870432的博客
03-29 2113
增删改查就是使用数据库的一般操作 增加 删减 修改 查询 1） 增加的命令：insert into +（表名） 删除的命令：delete from +（表名） drop （表名） 修改的命令：update +（表名）set 查询：select （表名）from * 代表全部 比如有一个数据库有个表名叫做sjk 里面有某班级成绩表 成绩表里有学生姓名、学号、各科成绩等信息 你要想查 a学生的学号就输入命令 select 学号 from（表名） 查询a所有信息就直接用select * ...
laraver证删改查
qq_39618306的博客
01-02 269
CURD： DB::insert('insert into student(name,age)values(?,?)',['sean',18]); 添加成功  返回booler值 DB::update('update student set age = ? where name = ? ',[20,'seam']); 修改成功 返回行数 DB::select('select * from
大学生电子设计大赛-0-30V 4A数控稳压电源资料.rar
最新发布
08-12
大学生电子设计大赛-0-30V 4A数控稳压电源资料.rar
PostMan 增删改查
08-19
- *3* [Elaticsearch第四篇 postman的添删查改ES（索引和文档的增删改查）](https://blog.csdn.net/bluewelkin/article/details/107424356)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值