精华内容
下载资源
问答
  • 网页增删改查Demo

    2012-12-05 20:52:37
    网页增删改查Demo,使用asp.net,数据库为Sqlserver数据库,适合初学者使用。
  • 又经过两天的补习,这回复习的是原生JSP增删改查,主要是Java部分写逻辑,然后再JSP中调用相应的逻辑从而实现网页增删改查以及登陆功能,并且通过Filter过滤器来实现未登录拦截功能。具体详情请移步至我对应的博客...
  • 简单html增删改查

    2013-06-05 23:17:51
    简单html增删改查,适合初学者使用.包含两个文件
  • 本文实例讲述了jQuery实现对网页节点的增删改查功能。分享给大家供大家参考,具体如下: 前面介绍过《JavaScript针对网页节点的增删改查用法》,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点...
  • 本文实例讲述了JavaScript针对网页节点的增删改查用法。分享给大家供大家参考。具体分析如下: 一、基本概念 这部分也就是所谓的“HTML DOM”,所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的...
  • 通过父子页面来实现:增删改查,子页面通过文本框,来获取父页面的数据,不过网页特别的简陋。
  • 【jQuery】对网页节点的增删改查

    千次阅读 2015-06-13 09:48:52
    本文与《【JavaScript】网页节点的增删改查》(点击打开链接)为姊妹篇,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该。...

    本文与《【JavaScript】网页节点的增删改查》(点击打开链接)为姊妹篇,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该。

    下面举同样的例子来说明这个问题:


    如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作。

    网页中最多10个节点,最少0个节点,多了不让加,少了不让减。

    首先是本网页的基本布局:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>jQuery对网页节点的增删改查</title>
    		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    	</head>
    	<body>
    		<button>增加节点</button>
    		选择节点
    		<select id="nodeList"></select>
    		<button>删除节点</button>
    		<input type="text" />
    		<button>修改节点</button>
    		<div></div>
    	</body>
    </html>

    首先引入jQuery资源,之后,除了下拉列表以外其余节点没有ID,以展示两个Jquery获取节点的方式,一种通过id直接获取,一种通过获取子节点的方式的获取。

    这里没什么特别的,关键是下面的jQuery编程:

    <script type="text/javascript">
        var i = 1;//定义一个节点的id
    	$("body>div").css("border","1px solid #cccccc");//先把body下面的所有div的上style="border:1px solid #cccccc"属性。此乃jQuery对节点的css操作。
        $("body>button:eq(0)").click(function(){//body下面的第0个按钮的onclick事件
            if (i < 11) {//如果节点数少于在1-10之间
                $("body>div").append("<p id='p" + i + "'>text" + i + "</p>");//则在body下面的所有div,也就是唯一一个div中添加上id=p1,p2,p3...的节点,且文本为text1,2,3...
                $("#nodeList").append("<option id='option" + i + "' value='" + i + "'>text" + i + "</p>");//同时在下拉列表中加上id=option1,option2....,value=1,2,3...的选项,一会儿,供下面的修改、删除使用
                i++;//节点数加1
    			$("body>div").css("border","1px solid #cccccc");//如果符合要求,使边框变灰
            }
            else {//如果不符合要求,弹出警告,使边框变红
                alert("最多10个节点!");
    			$("body>div").css("border","1px solid #ff0000");
            }
        });
        $("body>button:eq(1)").click(function(){//body下面的第1个按钮的onclick事件
            if (i > 1) {
                var removeId = $("#nodeList").val();//获取要下拉列表中的值
                $("#option" + removeId).remove();//删除相应的选项、p节点
                $("#p" + removeId).remove();
                i--;//节点数减1
    			$("body>div").css("border","1px solid #cccccc");
            }
    		else{
    			alert("最少0个节点!");
    			$("body>div").css("border","1px solid #ff0000");
    		}
        });
    	$("body>button:eq(2)").click(function(){//body下面的第2个按钮的onclick事件
    		if (i > 1) {
    			var updateText = $("body>input[type='text']").val();//获取文本框的输入内容
    			var updateId = $("#nodeList").val();//获取下拉拉列表中的值
    			var updateFlag = true;//用来验证是否有同名节点的flag
    			$("body>div>p").each(function(){//遍历div下的所有p节点
    				if(updateText==$(this).html()){//如果输入的值等于p节点的值
    					alert("已有同名节点,不得修改!");//则弹出警告
    					$("body>div").css("border", "1px solid #ff0000");
    					updateFlag = false;//收起flag
    				}
    			});
    			if (updateFlag) {
    				if (updateText != "") {
    					$("#option" + updateId).html(updateText);//修改下拉列表中的值
    					$("#p" + updateId).html(updateText);//修改相应p节点的值
    					$("body>input[type='text']").val("");//清空输入框
    					$("body>div").css("border", "1px solid #cccccc");
    				}
    				else {
    					alert("修改内容不得为空!");
    					$("body>div").css("border", "1px solid #ff0000");
    				}
    			}
    		}
    		else{
    			alert("没有节点,修改毛线!");
    			$("body>div").css("border", "1px solid #ff0000");			
    		}
    	});
        
    </script>
    可以看到,这里jQuery设置css是先指明要修改的css属性,再写上要修改的内容,Javascript修改css则是对节点的style修改。

    jQuery对节点的遍历,用each方法则可以。Javascript则要对要遍历的节点,赋予name,然后利用document.getElementbyName将所有name拿下,则进行遍历。

    jQuery删除一个节点,比Javascript简便多了,一个remove()搞掂一切,Javascript则要找自己的父节点测能删除自己。

    jQuery找子节点,可以直接用>符号来查看,Javascript则要通过xx.getElementsByTagName去查找。

    展开全文
  • html增删改查

    千次阅读 2018-01-19 08:39:19
    <!DOCTYPE html> <html ng-app="App"> <title></title> .css1{ background-color: red; } .
    <!DOCTYPE html>
    <html ng-app="App">
        <head>
            <meta charset="UTF-8">
            <title></title>
    
            <style>
                .css1{
                    background-color: red;
                }
    
                .css2{
                    background-color: brown;
                }
    
            </style>
        </head>
        <body ng-controller="Demo">
    
            <input type="text" placeholder="请输入查询商品" ng-model="search" /> 
                数量排序:
                <select ng-model="selOrder">
                    <option value="nums">数量正序</option>
                    <option value="-nums">数量倒序</option>
                </select>
                <button ng-click="delSelect()" class="sb">批量删除</button><br />
    
    
                <table border="2px" cellspacing="0">
    
                <tr>
                    <!--<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td>-->
                    <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></td>
                    <td>产品编号</td>
                    <td>产品名称</td>
                    <td>购买数量</td>
                    <td>产品单价</td>
                    <td>产品总价</td>
                    <td>操作</td>
                </tr>
    
    
    
                <tr ng-repeat="x in datas | filter:{name:search}| orderBy:selOrder" class="{{ $even ? 'css1':'css2'}}">
    
                    <td><input type="checkbox" ng-model="x.state"/></td>
                    <td>{{x.id}}</td>
                    <td>{{x.name}}</td>
                    <td>
                        <button ng-click="jian($index)">-</button>
    
                        <input type="number" ng-model="x.nums"/>
                        <button ng-click="add($index)">+</button>
                    </td>
                    <td>{{x.prices}}</td>
                    <td>{{x.prices*x.nums}}</td>
                    <td><button ng-click="remove($index)">移除</button>
                        <button ng-click="updateShowFun($index)">修改</button>
                    </td>
                </tr>
            </table>
    
    
            <div>
                <span>总价</span>
                <span>{{totalPrice()}}</h3>
                <span>总数</h3>
                <span>{{totalNum()}}</h3>
                <button ng-click="removeAll()">清空购物车</button>
    
            </div>
    
    
            <form style="border: 1px solid yellow; width: 260px;">
    
                        商品编号:<input type="text" ng-model="ID"/><br />
                        商品名称:<input type="text" ng-model="IDname"/><br />
                        商品数量:<input type="number" ng-model="IDnum"/><br />
                        商品单价:<input type="text" ng-model="IDprice"/><br />
    
                        <button ng-click="add333()">添加</button>
    
                    </form>
    
                <form style="border: solid black; width: 300px;" ng-show="updateShow">
                        商品编号:<input type="text" ng-model="updateId"/><br />
                        商品名称:<input type="text" ng-model="updateName"/><br />
                        商品数量:<input type="number" ng-model="updateNum"/><br />
                        商品单价:<input type="number" ng-model="updatePrice"/><br />
                        <button type="button" value="提交" ng-click="updateSub()">提交</button>
    
                    </form>
    
            <script src="../libs/angular.min.js"></script>
    
            <script>
                var App = angular.module("App",[]);
                App.controller("Demo",function($scope){
    
                    //数据
                    $scope.datas = [
                        {
                            id:1001,
                            name:"ihone8",
                            nums:1,
                            prices:3888,
                            state: false
                        }
                        ,
                        {
                            id:1002,
                            name:"ihone10",
                            nums:1,
                            prices:6888,
                            state: false
                        }
                        ,
                        {
                            id:1003,
                            name:"ihone7",
                            nums:1,
                            prices:5888,
                            state: false
                        }
                    ];
    
                    //数量减减
                    $scope.jian = function(index){
    
                        $scope.datas[index].nums--;
    
                    }
    
                    //数量加加
                    $scope.add = function(index){
    
                        $scope.datas[index].nums++;
    
                    }
    
                    //移除的
                    $scope.remove = function(index){
                        if(confirm("确定要移除吗?")){
                            $scope.datas.splice(index,1);
                        }
    
    
                    }
    
                    //全选和反选
                    $scope.selectAllFun = function(){
                        if($scope.selectAll){
                            //如果是true的话,把下面的都选中
    
    
                        for (var x=0;x<$scope.datas.length;x++) {
    
                            $scope.datas[x].state = true;
                        }
    
                        }else{   //全部不选中
                            for (var x=0;x<$scope.datas.length;x++) {
    
                            $scope.datas[x].state = false;
                        }
                        }
                    }
    
    
                    //批量删除 名字进行删除
                    $scope.delSelect = function(){
    
                        var arrs =[];
                        for (var x=0;x<$scope.datas.length;x++) {
                            if($scope.datas[x].state){
                                arrs.push($scope.datas[x].name);
                            }
                        }
    
                        if(arrs.length<=0){
                            alert("请您选中你要删除的数据")
                        }else{
                            //开始进行删除
    
                            for (var x=0;x<arrs.length;x++) {
    
                                for (var x2=0;x2<$scope.datas.length;x2++) {
    
                                    if(arrs[x]==$scope.datas[x2].name){
                                        //删除
                                        $scope.datas.splice(x2,1);
                                    }
    
                                }
    
    
                            }
                        }
                    }
    
    
                    //总价
                    $scope.totalPrice = function(){
    
                        var totalPrice=0;
    
                        for (var x=0;x<$scope.datas.length;x++) {
    
                            totalPrice+=$scope.datas[x].prices *$scope.datas[x].nums;
                        }
    
                        return totalPrice;
    
                    }
    
    
                    //总数
                    $scope.totalNum = function(){
    
                        var totalNums=0;
    
                        for (var x=0;x<$scope.datas.length;x++) {
    
                            totalNums+=$scope.datas[x].nums;
                        }
    
                        return totalNums;
    
                    }
    
                    //清空购物车
                    $scope.removeAll = function(){
                        $scope.datas =[];
                    }
                    //增加数据的方法
                    $scope.add333 = function(){
    
                        /*ng-model="ID"/><br />
                        商品名称:<input type="text" ng-model="IDname"/><br />
                        商品数量:<input type="text" ng-model="IDnum"/><br />
                        商品单价:<input type="text" ng-model="IDprice"*/
    
                        var flag1 = false;
    
                        if($scope.ID=="" || $scope.ID==null){
                            flag1 = false;
                            alert("ID不能为空")
    
                            return;
                        }else if(isNaN($scope.ID)){  //如果传入的参数是非数字返回true,如果是数字返回false
                            flag1 = false;
                            alert("ID必须是数字")
                            return;
                        }else{
                            flag1 = true;
                        }
    
                        if($scope.IDname=="" || $scope.IDname==null){
                            flag1 = false;
                            alert("IDname不能为空")
                            return;
                        }else{
                            flag1 = true;
                        }
    
                        if($scope.IDnum=="" || $scope.IDnum==null){
                            flag1 = false;
                            alert("IDnum不能为空")
                            return;
                        }else if(isNaN($scope.IDnum)){  //如果传入的参数是非数字返回true,如果是数字返回false
                            flag1 = false;
                            alert("IDnum必须是数字")
                            return;
                        }else{
                            flag1 = true;
                        }
    
                        if($scope.IDprice=="" || $scope.IDprice==null){
                            flag1 = false;
                            alert("IDnum不能为空")
                            return;
                        }else if(isNaN($scope.IDprice)){  //如果传入的参数是非数字返回true,如果是数字返回false
                            flag1 = false;
                            alert("IDnum必须是数字")
                            return;
    
                        }else{
                            flag1 = true;
                        }
    
    
                        if(flag1){
                            //添加数据到原始的集合里面
                            $scope.datas.push({
    
                            id:$scope.ID,
                            name:$scope.IDname,
                            nums:$scope.IDnum,
                            prices:$scope.IDprice,
    
    
                            });
                        }
    
    
                    }
    
    
                        var index333 = 0;
    
                    //修改的
                    $scope.updateShowFun = function(index){
    
                        index333=index; 
    
                        if(confirm("确定要修改吗")){
                            $scope.updateShow = true;
    
                        }
    
                    }
    
    
    
                    //提交按钮
                    $scope.updateSub = function(){
    
                        $scope.datas[index333].id = $scope.updateId;
                                $scope.datas[index333].name = $scope.updateName;
                                $scope.datas[index333].nums= $scope.updateNum;
                                $scope.datas[index333].prices = $scope.updatePrice;
    
    
    
                        /*for (var x=0;x<$scope.datas.length;x++) {
    
                            $scope.datas.[index333]
    
                            if($scope.datas[x].id==$scope.updateId){
                                $scope.datas[x].id = $scope.updateId;
                                $scope.datas[x].name = $scope.updateName;
                                $scope.datas[x].nums= $scope.updateNum;
                                $scope.datas[x].prices = $scope.updatePrice;
                            }
    
    
    
                        }*/
    
                    }
    
    
    
                });
    
            </script>
        </body>
    </html>
    

    展示图片
    这里写图片描述

    展开全文
  • 纯JS+HTML简单表格增删改查

    万次阅读 多人点赞 2018-07-17 20:33:11
    首先这两天写的一个简单增删改查,基本上靠百度和自学,完成的这个作业。 里面的功能十分的简陋,对于有需要的朋友一点点帮助吧。 这不是一条通往项目的链接:https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w ...

    学完HTML+JavaScript,不加点餐???

    Liunx 全操作过程 【JDK1.8配置、MySQL、Docker、mariaDB、nginx、tomcat、redis、各种问题解决总结】

    JDK1.8新特性

    UML统一建模语言

    Vue增删改查

    首先这两天写的一个简单增删改查,基本上靠百度和自学,完成的这个作业。

    里面的功能十分的简陋,对于有需要的朋友一点点帮助吧。

    这不是一条通往项目的链接:https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密码:030a

    里面有一些前期练习,如果心急,那就直接看index4.html吧,那是此次的网页实现,js文件放在js文件夹下。

    然后,先给大家看看效果,因为没有写css美化,太过于难看,请见谅!

    这是一个项目演示

     下面我讲解一下,我在这个作业中遇到的问题,相信初学者同样也会和我一样遇到这类问题。

    首先你要弄懂innerHTML和innerText的区别,这个很容易就遇到问题。

    innerHTML获取到的不只是文本,它得到的是标签对,相当于你获取一行代码吧。

    innerText获取到却是纯文本,当然兼容性在这里并不涉及,想要更弄懂这其中缘由,自行百度。

    以下是我出错地方:

    需求是获取复选框后面文本,想当然用到百度,百度得到的代码也的确有用,而不是value值

    样式图一样式图二

    第一个错误,实现依靠nextSibling.nodeValue得到文本值,但是得到的值,如果使用innerHTML获取,就会出现错误,下面进行比较判断很容易出错,这时应该用innerText,直接获取纯文本,进行比较。

    //获取文本值
    var selectedValue="";
    for(var i=0;i<interests.length;i++){
    	if(interests[i].checked){
    //			nextSibling是获得当前对象的下一个对象
    //			nodeValue是返回一个节点的值
    		selectedValue=selectedValue+interests[i].value+" ";
    //		selectedValue=selectedValue+interests[i].nextSibling.nodeValue;
    	}
    }

    第二个错误,当更新/修改值时,使用innerHTML或innerText似乎都会自动换行,这时你就用用到去除空格或者去除换行,防止出现错误,无法判断到值。

    而我用到的是正则表达式,使用replace()匹配替换值。

    去掉后面空格

    str="abc            ";

    str=str.replace(/(\s*$)/g, "");

    console.log(str);

    去掉换行

    str="abc/n/r";

    str=str.replace(/[\r\n]/g,"");

    console.log(str);

    第三个错误,其实是我对代码不熟造成的,重置功能实现,每次对于点击修改回显数据时,第二次点击修改按钮回显数据,就会造成复选框以及单选框、下拉框不显示的错误,为了避免这个错误,应该每次点击前清空所有数据,然后在回显数据。

    如果在后面重置,就会造成文本框内容变了,但是下拉框以及复选框,单选框都没变呐。

    第四个错误,其实在修改更新时出现,原本我打算每次点击修改按钮后,将提交按钮隐藏,重新创建一个节点按钮,如果用户不乱点,看起来还一点毛病都没有,谁叫我手贱多点几下修改按钮,这新增的更新按钮如洪水般蔓延演化而出,咦,怎么把它只新增一次呢?扣了扣头,哥达鸭一愣,发现我解决不了,所以只好去百度取经,DOM节点的使用,也就弄明白setAttribute()这个方法原来是修改节点属性的东东,只好另辟蹊径改改提交按钮就ok了,汗颜!!!

     

    第五个错误,也属于低级错误,哎,怎么老犯这么多错呢?对于JS的方法使用出现了致命错误。大一讲的JavaScript知识,似乎过了一年又全换回去了。这不老师又重新讲解一下,但是就前面的几个练习,还不足以然我想起曾经的知识。

    这个错误居然是内部函数调用出错,一开始我使用的window.onload = function() {

    document.getElementById(id).onclick = function() {

            代码块

    }

    }

    原本打算使用window.onload = function() {

                 function 方法名(){}

    }

    在按钮那边写个οnclick=“方法名()”调用一下就行,结果出现整个方法没有调用,还一直报错,然后就又来到百度,搜啊搜啊,找到解决方案了,就写成了window.onload = function() {

                 del=function(obj){}

    }这样,好像行得通,不管了先用再说。

    结果不游细说,又出现一个跟这个相同的错误,什么?前面代码都没错,为什么修改回显就出错?岂有此理!!然后我就老实的百度,到最后还是我的同学,一针见血。原来方法是要写到外面去,才能调用,所以又浪费好长的时间,心痛自己。

    第六个错误,其实不算错误,只是把我饶了一大圈,就比如

    document.getElementById(id).onclick = function() {

            代码块

    }

    这么写代码,可是呢?我在按钮一边就只写了name值,然后我调用了getElementsByName(name)这来实现点击事件,结果发现报错呢?什么原因我没有去查,不过好像这么写只有id值才能调用点击事件。

    getElementsByTagName(标签)这个好像是获取所有选中的标签,好像是个集合,所以可以在后面直接加上【0】、【1】等这类,来简单处理一些问题。

    下面就是功能解释:

    首先讲解一下,具体实现的功能要求。

    样式图三

    获取光标--------增加一条用户信息,同时显示在下方------重置----全选或选中部分删除--------单个删除------修改回显-------修改内容

    以上就是个人完成的步骤。

    下面直接先贴HTML代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<script type="text/javascript" src="js/js.js" ></script>
    	<body>
    		<table border="1" cellpadding="0" cellspacing="0">
    			<tr>
    				<td colspan="2" align="center">用户注册信息</td>
    			</tr>
    			<tr>
    				<td>用户名</td>
    				<td>
    					<input type="text" id="user" style="width:150px" />
    				</td>
    			</tr>
    			<tr>
    				<td>密码</td>
    				<td>
    					<input type="password" id="password" style="width:150px" />
    				</td>
    			</tr>
    			<tr>
    				<td>籍贯</td>
    				<td>
    					<select id="place">
    						<option value="">请选择</option>
    						<option value="1">浙江</option>
    						<option value="2">河南</option>
    						<option value="3">北京</option>
    						<option value="4">重庆</option>
    					</select>
    				</td>
    			</tr>
    			<tr>
    				<td>兴趣</td>
    				<td>
    					<input type="checkbox" name="interest" value="篮球"/>篮球
                        <input type="checkbox" name="interest" value="足球"/>足球
                        <input type="checkbox" name="interest" value="书法"/>书法
                        <input type="checkbox" name="interest" value="音乐"/>音乐
                        <br>
                        <input type="checkbox" name="interest" value="绘画"/>绘画
                        <input type="checkbox" name="interest" value="散打"/>散打
                        <input type="checkbox" name="interest" value="瑜伽"/>瑜伽
                        <input type="checkbox" name="interest" value="其他"/>其他
    				</td>
    			</tr>
    			<tr>
                    <td>政治面貌 </td>
                    <td>
                        <input type="radio" name="identity"/>党员
                        <input type="radio" name="identity"/>团员
                        <input type="radio" name="identity"/>群众
                    </td>
                </tr>
                <tr>
                	<td colspan="2" align="center">
                		<input type="button" id="submit" value="提交"/>
                		<input type="button" id="reset" value="重置" />
                	</td>
                </tr>
    		</table>
    		<br /><br /><br /><br />
    		<div class="">
    			<table border="1" cellspacing="0" cellpadding="0" id="listTable">
    				<tr>
    					<td>选中</td>
    					<td>用户名</td>
    					<td>密码</td>
    					<td>籍贯</td>
    					<td>兴趣</td>
    					<td>政治面貌</td>
    					<td>操作</td>
    				</tr>
    				<tr>
    					<td>
    						<label>全选</label>
    						<input type="checkbox" name="item" onclick="checkAll(this);"/>
    					</td>
    					<td  colspan="6" align="center">
    						<input type="button" value="选中删除" onclick="delRow();"/>
    					</td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" name="item"/></td>
    					<td>007</td>
    					<td>123456</td>
    					<td>浙江</td>
    					<td>书法 绘画 瑜伽</td>
    					<td>团员</td>
    					<td>
    						<input type="button" value="删除" onclick="del(this);"/>
    						<input type="button" name="update" value="修改" onclick="modify(this)"/>
    					</td>
    				</tr>
    			</table>
    		</div>
    	</body>
    </html>
    

    然后就是下面就是js代码,其中就不在细说,注释也有,自行查阅。

    window.onload = function() {
    	var submits = document.getElementById("submit");
    	//获取焦点
    	document.getElementById('user').focus();
    	document.getElementById('user').select();
    	//增加
    	submits.onclick = function() {
    		//获取用户信息
    		var user = document.getElementById("user").value;
    		//获取密码
    		var password = document.getElementById("password").value;
    		//获取籍贯
    		var place = document.getElementById("place");
    		//获取索引
    		var index = place.selectedIndex;
    		//获取选中值
    		var placeValue = place.options[index].text;
    		//获取兴趣
    		var interests = document.getElementsByName("interest");
    		//获取value值
    		var selectValue="";
    		for(var i = 0; i < interests.length; i++) {
    			var interest = interests[i];
    			if(interest.checked==true) {
    				selectValue=selectValue+interest.value+",";
    			}
    		}
    		//获取文本值
    		var selectedValue="";
    		for(var i=0;i<interests.length;i++){
    			if(interests[i].checked){
    //			nextSibling是获得当前对象的下一个对象
    //			nodeValue是返回一个节点的值
    				selectedValue=selectedValue+interests[i].value+" ";
    //				selectedValue=selectedValue+interests[i].nextSibling.nodeValue;
    			}
    		}
    		selectedValue=selectedValue.replace(/(\s*$)/g, "");//去掉后面空格
    		var radioValue="";
    		var identitys=document.getElementsByName("identity");
    		for(var i=0;i<identitys.length;i++){
    			if(identitys[i].checked){
    				radioValue=radioValue+identitys[i].nextSibling.nodeValue;
    			}
    		}
    		//增加
    		add(user,password,placeValue,selectedValue,radioValue);
    	}
    	
    	//重置
    	document.getElementById('reset').onclick=function(){
    		resets();
    	};
    	
    	function add(user,password,placeValue,selectedValue,radioValue){
    		//创建一个框架节点
    		var tr =document.createElement("tr");
    		var td1 =document.createElement("td");
    		var td2 =document.createElement("td");
    		var td3 =document.createElement("td");
    		var td4 =document.createElement("td");
    		var td5 =document.createElement("td");
    		var td6 =document.createElement("td");
    		var td7 =document.createElement("td");
    		
    		//赋值
    		//setAttribute:修改节点属性
    		var input1=document.createElement("input");
    		input1.setAttribute('type','checkbox');
    		input1.setAttribute('name','item');
    		td1.appendChild(input1);
    		//获取到的值进行赋值,innerHTML获取到的值会把标签同时获取
    		td2.innerHTML=user;
    		td3.innerHTML=password;
    		td4.innerHTML=placeValue;
    		td5.innerHTML=selectedValue;
    		td6.innerHTML=radioValue;
    		//操作添加
    		//创建一个input节点
    		var input2=document.createElement("input");
    		input2.setAttribute('type','button');
    		input2.setAttribute('value','删除');
    		input2.setAttribute('onclick','del(this)');
    		//追加节点
    		td7.appendChild(input2);
    		
    		var input3=document.createElement("input");
    		input3.setAttribute('type','button');
    		input3.setAttribute('name','update');
    		input3.setAttribute('value','修改');
    		//添加修改事件
    		input3.setAttribute('onclick','modify(this)');
    		td7.appendChild(input3);
    		
    		//将所有td标签对放入tr中
    		tr.appendChild(td1);
    		tr.appendChild(td2);
    		tr.appendChild(td3);
    		tr.appendChild(td4);
    		tr.appendChild(td5);
    		tr.appendChild(td6);
    		tr.appendChild(td7);
    		var table=document.getElementById('listTable');
    		table.appendChild(tr);
    		//重置(方法)
    		resets();
    	}
    	
    	//全选
    	checkAll=function (obj){
    		var checked=obj.checked;
    		var item=document.getElementsByName("item");
    		for(var i=0;i<item.length;i++){
    			if(item[i].checked){
    				item[i].checked=null;
    			}else{
    				item[i].checked=checked;
    			}
    			item[i].checked=checked;	
    		}
    	}
    	
    	//删除单项
    	del=function(obj){
    		var parentTr=obj.parentNode.parentNode;
    		var parentTable = parentTr.parentNode;
    		parentTable.removeChild(parentTr);
    	}
    	//删除选中
    	delRow=function(){
    		var items=document.getElementsByName("item");
    		for(var i=1;i<items.length;i++){
    			if(items[i].checked){
    				var parentNode=items[i].parentNode.parentNode;
    				var tables=parentNode.parentNode;
    				tables.removeChild(parentNode);
    				i--;
    			}
    		}
    	}
    }
    
    var	rowIndex;
    //修改回显
    function modify (obj){
    	//重置
    	resets();
    	//获取
    	var user=document.getElementById('user');
    	var password = document.getElementById("password");
    	var place = document.getElementById("place");
    	var index = place.selectedIndex;
    	var placeValue = place.options[index].text;
    	//获取tr和td对,以及选中的下标
    	var tr = obj.parentNode.parentNode;
        var td = tr.getElementsByTagName('td');
    	rowIndex=obj.parentNode.parentNode.rowIndex;
    	//赋值
    	user.value=td[1].innerHTML;
    
    	password.value=td[2].innerHTML;
    	placeValue=td[3].innerHTML;
    	for(var i=0;i<place.options.length;i++){
    		var value= place.options[i].text;
    		if(value==placeValue){
    			place.options[i].selected=true;
    		}
    	}
    	var interValue=td[4].innerHTML;
    	var str= interValue.split(" ");
    	var interests = document.getElementsByName("interest");
    	for(var i=0;i<str.length;i++){
    		for (let j=0;j<interests.length;j++) {
    			if(interests[j].value==str[i]){
    				interests[j].checked=true;
    			}
    		}
    	}
    	var identitys=document.getElementsByName("identity");
    	//这里更新到的值会出现换行,造成字符串无法比较
    	var identValue=td[5].innerText;
    	identValue=identValue.replace(/[\r\n]/g,"");//去掉换行符
    	if(identValue=="党员"){
    		identitys[0].checked=true;
    	}else if(identValue=="团员"){
    		identitys[1].checked=true;
    	}else if(identValue=="群众"){
    		identitys[2].checked=true;
    	}
    	//回显完毕后,修改按钮事件
    	var addButton=document.getElementById('submit');
    	try{
    		if(addButton.getAttribute("value")=="提交"){
    			addButton.setAttribute('value','更新');
    			addButton.setAttribute('id','update');
    			addButton.setAttribute('onclick','update()');
    		}
    	}catch(e){
    		//TODO handle the exception
    	}
    }
    
    //修改
    function update(){
    	//获取
    	var table=document.getElementById('listTable');
    	var user=document.getElementById('user');
    	var password = document.getElementById("password");
    	var place = document.getElementById("place");
    	var index = place.selectedIndex;
    	var placeValue = place.options[index].text;
    	var interests = document.getElementsByName("interest");
    	//获取文本值
    	var selectedValue="";
    	for(var i=0;i<interests.length;i++){
    		if(interests[i].checked){
    			selectedValue=selectedValue+interests[i].value+" ";
    		}
    	}
    	//去掉末尾空格
    	selectedValue=selectedValue.replace(/(\s*$)/g, "");
    	var radioValue="";
    	var identitys=document.getElementsByName("identity");
    	for(var i=0;i<identitys.length;i++){
    		if(identitys[i].checked){
    			radioValue=radioValue+identitys[i].nextSibling.nodeValue;
    		}
    	}
    	
    	//赋值
    	table.rows[rowIndex].cells[1].innerHTML=user.value;
    	table.rows[rowIndex].cells[2].innerHTML=password.value;
    	table.rows[rowIndex].cells[3].innerHTML=placeValue;
    	table.rows[rowIndex].cells[4].innerHTML=selectedValue;
    	table.rows[rowIndex].cells[5].innerText=radioValue;
    	
    	//更新成功后,将按钮改回原来按钮,同时重置
    	var updateButton=document.getElementById('update');
    	updateButton.setAttribute('value','提交');
    	updateButton.setAttribute('type','button');
    	updateButton.setAttribute('id','submit');
    	updateButton.setAttribute('onclick','add()');
    	resets();
    }
    
    //重置
    function resets(){
    	var inputs=document.getElementsByTagName("input");
    	for(var i=0;i<inputs.length;i++){
    		if(inputs[i].type=='text'){
    			inputs[i].value="";
    		}else if(inputs[i].type=='password'){
    			inputs[i].value="";
    		}else if(inputs[i].type=='checkbox'){
    			if(inputs[i].checked){
    				inputs[i].checked=false;
    			}
    		}else if(inputs[i].type=='radio'){
    			if(inputs[i].checked){
    				inputs[i].checked=false;
    			}
    		}
    	}
    	//重置下拉框
    	var place=document.getElementById('place');
    	place.selectedIndex=0;
    	//获取焦点
    	document.getElementById('user').focus();	
    }
    

    ok,希望各位有一定收获。

    欢迎大家支持我!有稳定收入的各位可以支持一下,谢谢,支付宝二维码!

    展开全文
  • 为了给初学者一些快速上手的前后端都包含的demo,特意以最简单的方式实现这个实例。 里面包含的有后端的增删改查代码以及html页面去调用接口实现前后端交互。
  • 一个简单的网页管理信息,可以添加姓名年龄,也可以单独对每行的数据进行删除修改,还可以进行查询操作 html代码 记录列表</br></br> 姓名: <input type="text" name="name" id="name" placeholder...

    一个简单的网页管理信息,可以添加姓名年龄,也可以单独对每行的数据进行删除修改,还可以进行查询操作

    html代码

    记录列表</br></br>
    		姓名: <input type="text" name="name" id="name" placeholder="姓名" />
    		年龄: <input type="text" placeholder="年龄" />
    		<input type="button" value="添加" onclick="testadd()">
    		</br></br>
    		姓名:<input type="text" name="sname" id="sname" placeholder="姓名" />
    		<input type="button"  value="查询" onclick="testselect()"/>
    		</br></br>
    		<table style="border: 1px solid black;width: 600px;">
    			<thead>
    				<tr>
    					<th style="width: 15%; text-align: center">ID</th>
    					<th style="width: 30%; text-align: left">姓名</th>
    					<th style="width: 30%; text-align: left">年龄</th>
    					<th style="width: 25%; text-align: left">操作</th>
    				</tr>
    			</thead>
    			<tbody id="tbody">
    
    			</tbody>
    		</table>
    

    JS代码

    <script type="text/javascript">
    			var inputs = document.getElementsByTagName("input"); //获得输入标签的全部对象作为一个数组
    			var vid = 1; //id
    			function testselect() {
    				var name = inputs[3].value;
    				var rows = document.getElementsByTagName("tr");
    				
    				for (var i = 1; i < rows.length; i++) {
    					var temp = rows[i].cells[1].innerHTML;
    					rows[i].removeAttribute("style");//把每行的的样式清空
    				}
    				if (name == '') {//如果输入为空 结束方法
    					return;
    				}
    				for (var i = 1; i < rows.length; i++) {
    					var temp = rows[i].cells[1].innerHTML;//获得每行第二个的值
    					if (temp.indexOf(name) > -1) {
    						rows[i].style.backgroundColor = 'yellow';
    					}
    				}
    			}
    
    			function testadd() { //添加方法
    				var val_name = inputs[0].value; //获得输入name
    				var val_age = inputs[1].value; //获得输入age
    
    				var tr = document.createElement("tr"); //创建tr对象  行对象
    
    				var td_id = document.createElement("td"); //创建tr行里面的列对象  即id
    				td_id.innerText = vid++;
    				tr.appendChild(td_id); //向tr中添加子节点td id
    
    				var td_name = document.createElement("td");
    				td_name.innerText = val_name;
    				tr.appendChild(td_name);
    
    				var td_age = document.createElement("td");
    				td_age.innerText = val_age;
    				tr.appendChild(td_age);
    
    				var td_opt = document.createElement("td");
    				td_opt.innerHTML = '<a href="javascript:;">删除</a>&nbsp&nbsp<a href="javascript:;">修改</a>'
    				var atags = td_opt.getElementsByTagName("a"); //a标签对象数组
    				atags[0].onclick = testdel; //第一个a标签 删除功能
    				atags[1].onclick = testupd;
    				tr.appendChild(td_opt);
    
    				document.getElementById("tbody").appendChild(tr); //向tbody标签中添加字标签tr
    			}
    
    			function testdel() {
    				var temp = this.parentNode.parentNode; //找到当前对象的前一个对象的前一个对象
    				if (confirm("是否要删除该行记录?")) {
    					document.getElementById("tbody").removeChild(temp);
    				}
    			}
    
    			function testupd() {
    				var thistd = this.parentNode;
    				var td_age = thistd.previousSibling; //同一级前一个对象标签
    				var td_name = td_age.previousSibling;
    				var td_id = td_name.previousSibling;
    				//把姓名和年龄两个对象标签换成下面的字符串  操作标签换成保存
    				//多个保存时 不知道保存哪一个 需要唯一标识作为id 确定保存哪个   
    				td_age.innerHTML = "<input type ='text' id ='tAge" + td_id + "' value='" + td_age.innerHTML + "'>";
    				td_name.innerHTML = "<input type ='text' id ='tName" + td_id + "' value='" + td_name.innerHTML + "'>";
    				thistd.innerHTML = "<a href= 'javascript:;'>保存</a>"
    				//给保存一个功能事件
    				thistd.getElementsByTagName("a")[0].onclick = function() {
    					//取得输入的修改后的值
    					td_age.innerHTML = document.getElementById('tAge' + td_id).value;
    					td_name.innerHTML = document.getElementById('tName' + td_id).value;
    					//把功能标签换成原来的删除修改
    					thistd.innerHTML = '<a href="javascript:;">删除</a>&nbsp&nbsp<a href="javascript:;">修改</a>'
    					var atags = thistd.getElementsByTagName("a");
    					atags[0].onclick = testdel;
    					atags[1].onclick = testupd;
    				}
    
    			}
    		</script>
    
    展开全文
  • Javaweb实现增删改查操作操作

    万次阅读 多人点赞 2019-09-21 09:47:19
    Javaweb实现增删改查操作操作 一:准备工作 1:Idea编辑器(eclispe和myeclispe都可以,个人推荐使用idea),新建一个web项目 2:数据库mysql 3:需要提前了解的知识点 servlet el和jstl表达式 项目的基本的框架实现...
  • 在实现简单网页上对数据内容进行增删改查,需要用到三个部分,分别是jsp网页部分+java后台部分+数据库表 我用一个新闻的例子来实现,首先编写java后台程序 java后台程序: 我们用三层的模式进行设计:分别是...
  • 网页实现数据库的增删改查

    万次阅读 多人点赞 2018-05-01 20:41:40
    最近在做项目web后台数据增删查改的时候,看到一篇较为详细的经典文章,所以转载了下来,文章出处在:https://blog.csdn.net/qq_32539825/article/details/70657340如果作者认为侵权的告诉我,我立马删。首先jsp 和...
  • jsp连接数据库以及前端网页实现对数据库的增删改查(https://blog.csdn.net/ting_163/article/details/75805464)
  • PHP+MySQL 实现数据库增删改查,学生信息管理系统

    万次阅读 多人点赞 2019-10-28 16:46:20
    PHP+MySQL 实现数据库增删改查 通过学生信息管理系统,熟悉PHP+MySQL增删改查,本文介绍了学生信息管理系统。 此项目运行环境:Apache2.4.41 PHP7.3.8 查看演示 ...
  • 怎么使用ssm框架在HTML中实现增删改查,模糊查询,分页。
  • ThinkPHP的增删改查

    2015-01-04 17:56:16
    很粗略的写的这个案例,对字段没有做过滤和判断,主要是用ThinkPHP实现对数据库的增删改查,版本是ThinkPHP3.2.2内容 模块一:配置文件的配置 模块二:对数据库的查找 模块三:对数据库的添加 模块四:对数据库的...
  • 有就通过value="{$item['name']}"把值给form网页的输入框,并通过$this->display('form')跳转到form页面 在form页面点击提交的时候,rom中的action="{:U('update')}"执行PHP的uptade方法 uptade方法通过$_POST['name...
  • 【JavaScript】网页节点的增删改查

    千次阅读 2014-11-03 16:25:42
    这部分也就是所谓的“HTML DOM”,所谓HTML DOM也就是Web页面加载规则,是一个规则,也就是网页组成的基本公式。 也就是所有网页都必须按照:……的规则编写,也按照这样的规则加载。 所谓的“网页节点”,也叫...
  • javascript实现增删改查

    2019-11-30 17:22:04
    增删改查 增删改查对于学前端的来说,可以说是必修课,在很多的网站中都会遇见这种功能,那么今天,我们就来看看如何使用js来实现正删改查。 首先,我们先模拟一个后台数据,如下: var data = [ { "0":"李白", ...
  • 纯JS+HTML+CSS实现表格增删改查翻页--模板文件管理

    千次阅读 多人点赞 2020-02-20 20:59:20
    纯JS+HTML+CSS实现简单表格增删改查
  • html5数据库增删改查

    千次阅读 2016-11-10 18:19:04
    本文数据库操作使用的javaScript库是html5sql.js,官网地址:http://html5sql.com/ 简介: html5sql是一个让HTML5 Web Database使用更方便的轻量级JavaScript模块,它的基本功能是提供在一个事务中顺序执行SQL语句的...
  • 在这里面只有前端的jsp与后端的Controller,没有service以及serviceImpl,可在java实现信息的增删改查功能的网页设计(2)里面查看。 整体页面的效果图演示 该页面是这个网页的连接的整体效果图,主要分为两个部分...
  • js+html实现对表格的增删改查(适合小白)

    千次阅读 多人点赞 2019-12-15 10:31:29
    js+html实现对表格的增删改查 首先这两天写的一个简单增删改查,基本上靠百度和自学,完成的这个作业。里面的功能比较简陋,有一个小bug,不过已经够用了,对于有需要的朋友一点点帮助吧。 废话不多说直接上项目...
  • 网页对数据库进行增删改查

    千次阅读 2018-07-26 17:29:44
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script src="
  • php增删改查

    2017-12-31 08:23:08
    它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多;PHP还可以...
  • javaweb_实现增删改查操作

    万次阅读 多人点赞 2018-06-20 18:58:45
    花了几天的时间,终于...一:准备工作 1:test01文件夹(里面有所需的页面资源),我完成的是在里面添加增删改查操作 2:myeclipse(版本没什么要求) eclipse也行 3:数据库 MySQL 4:需要了解到的知识点: se...
  • 网页中操作表格,实现增删改查等操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格增删改查</title> <style> table{ border-...
  • Vue页面实现简单的增删改查

    万次阅读 2018-08-16 10:07:13
    目的:用vue实现简单的增删 注:我自己测试的后台是java+mysql。 这里提供前端页面。 只需要连接你的后台url就好了 需要准备 vue.js 和 bootstrap.css 代码如下 <!DOCTYPE html> <html> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,080
精华内容 9,632
关键字:

网页html增删改查