修改为form表单

最新推荐文章于 2023-10-23 06:15:00 发布
最新推荐文章于 2023-10-23 06:15:00 发布
阅读量679 收藏
点赞数 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
  
var app=angular.module("Liu",[]);
app.controller("myApp",function($scope,$http){
 $scope.jsonFromeNet="";
 //准备数据
 $http({
   method:"get",
   url:"http://gank.io/api/data/Android/10/1"
 }).then(
  function success(response){
     $scope.jsonFromeNet=response.data;
    },function error(response){
 
        }
 );
    
    //删除数据
    $scope.dele=function($index){
    $scope.jsonFromeNet.results.splice($index,1);
   
    }     
    $scope.ifFlag=false;
        
    //添加数据
    $scope.addnew=function(){
    $scope.ifFlag=!$scope.ifFlag;    
    }
    $scope.newtype="";
    $scope.newsource="";
    $scope.newcreatedAt="";
    $scope.newwho="";
        
    $scope.addGood=function(){
    if($("#but01").val()=="添加"){
    var good={
    type:$scope.newtype,
    source:$scope.newsource,
    createdAt:$scope.newcreatedAt,
    who:$scope.newwho,    
    };
    $scope.jsonFromeNet.results.push(good);
    $scope.ifFlag=false;    
    }    
    }
    $scope.updete=0;
    //修改商品
     $scope.ifFlag1=false;
     $scope.sele=function($index){
      $scope.ifFlag1=!$scope.ifFlag1;
          $scope.newtype=$scope.jsonFromeNet.results[$index].type;
          $scope.newsource=$scope.jsonFromeNet.results[$index].source;
          $scope.newcreatedAt=$scope.jsonFromeNet.results[$index].createdAt;
          $scope.newwho=$scope.jsonFromeNet.results[$index].who;
            $scope.indexs=$index;            
     }
     $scope.seleGood=function(){
         $scope.jsonFromeNet.results[ $scope.indexs].type=$scope.newtype;
         $scope.jsonFromeNet.results[ $scope.indexs].source=$scope.newsource;
         $scope.jsonFromeNet.results[ $scope.indexs].createdAt=$scope.newcreatedAt;
         $scope.jsonFromeNet.results[ $scope.indexs].who=$scope.newwho;          
         $scope.ifFlag1=false;
     }  
 $scope.search="";
 $scope.px="";
});  
</script>
<style>
.table{
width: 600px;
height: 30px;
margin: 0 auto;
}
</style>
</head>
<body ng-app="Liu" ng-controller="myApp">
   <center>
    <h3>IT权威新闻</h3>
    <input type="text" placeholder="请输入查询关键字" ng-model="search"/>
    <select ng-model="px">
    <option value="" selected="selected">--请选择--</option>
    <option value="createdAt">按时间升序</option>
    <option value="-createdAt">按时间降序</option>
    </select>
    <input type="button" value="添加新闻" ng-click="addnew()"/><br /><br />
     <table border="1" cellspacing="0" class="table">
      <tr>
               <th>序号</th>
      <th>type</th>
      <th>source</th>
      <th ng-click="px='createdAt'">createdAt</th>
      <th>who</th>
      <th>操作</th>
      </tr>
      <tr ng-repeat="g in jsonFromeNet.results | orderBy:px| filter:search ">
      <td>{{$index+1}}</td>
      <td>{{g.type}}</td>
      <td>{{g.source}}</td>
      <td>{{g.createdAt | date:"yyyy-MM-dd hh:mm:ss"}}</td>
      <td>{{g.who}}</td>
      <td>
      <input type="button" ng-click="dele($index)" value="删除"/>
      <input type="button" ng-click="sele($index)" value="修改"/>      
      </td>
      </tr>
     </table>      
     <div ng-show="ifFlag">
      <table style="text-align: center; width: 270px; height: 100px;">
      <tr style="text-align: right;">
      <td>type:<input type="text" ng-model="newtype"/><br /></td>
      </tr>
      <tr style="text-align: right;">
      <td>source:<input type="text" ng-model="newsource"/><br /></td>
      </tr>
      <tr style="text-align: right;">
      <td>createdAt:<input type="text" ng-model="newcreatedAt"/><br /></td>
      </tr>
      <tr style="text-align: right;">
      <td>who:<input type="text" ng-model="newwho"/><br /></td>
      </tr>
      <tr>
      <td><input type="button" id="but01" value="添加" ng-click="addGood()"/></td>
      </tr>
      </table>
             </div>           
     <div ng-show="ifFlag1">
      <table style="text-align: center; width: 270px; height: 100px;">
      <tr style="text-align: right;">
      <td>type:<input type="text" ng-model="newtype"/><br /></td>
      </tr>
      <tr style="text-align: right;">
      <td>source:<input type="text" ng-model="newsource"/><br /></td>
      </tr>
      <tr style="text-align: right;">
      <td>createdAt:<input type="text" ng-model="newcreatedAt"/><br /></td>
      </tr>
      <tr style="text-align: right;">
      <td>who:<input type="text" ng-model="newwho"/><br /></td>
      </tr>
      <tr>
      <td><input type="button" id="but02" value="修改" ng-click="seleGood()"/></td>
      </tr>
      </table>
             </div>      
   </center>
</body>
</html>
Mycsdn__
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在浏览器中对表单数据进行新增，更改，删除
藜笙的博客
06-05 1199
这一章，我们来了解一下怎样在浏览器里对表单里的数据进行修改，接上一章内容。 第一步先在视图里面建一个表格来存放数据。 @*表格样式*@ <div class="container mt-5"> <button class="btn btn-primary" onclick="openInsertModal()">新增</button> <button class="btn btn-primary" onclick="
表单修改.
weixin_54664933的博客
05-27 335
上一篇是表单新增，那么这一篇显然就是表单修改。以下是表单修改的步骤以及效果。 新增的时候我们用到了模态框，那么我们修改就也会用到模态框。这里直接将新增模态框进行复制，粘贴到修改的代码下面就行。对应的模态框名称和模态框的ID名城需要进行改动。 修改的方式与新增的方式是一样的没有什么差别，但是模态框出显得方式不同。我们在修改数据的时候应该是点击到我们需要修改的地方时弹出，并且带上那一行的数据。所以在这里我们需要给每一行的tr标签加上点击事件。分别设置变量从中查找td标签里第一个元素的文本值并赋给声明的变量。然
http网络解析
qq_qwertyjk的博客
01-13 334
var app=angular.module("Liu",[]); app.controller("myApp",function($scope,$http){  $scope.jsonFromeNet="";  //准备数据  $http({    method:"get",    url:"http://gank.io/api/data/Android/10/1"  }).t
把HTML表单提交的数据转化成XML文件
java2000.net
02-16 794
把HTML表单提交的数据转化成XML文件 作者：http://lucky.myrice.comE-mail:amxh@21cn.com     通常，在asp中进行的form表单提交的数据都被写进数据库管理系统中去，如果你想要你的数据是方便携带的数据，你可以把它写进一个XML文件中去。这种方法是跨平台的，因此你所收集的信息不需要进行转换。为了实现上面的想法，你必须先利用Microsoft XM...
对表单进行修改操作
fenghoumilin的博客
06-29 3486
一：提交一个带上id的修改请求 &lt;td&gt;&lt;a href="emp/${emp.empId }"&gt;修改&lt;/a&gt; &lt;/td&gt; 二：在controller中捕捉该请求 /* * value="emp/{id} {id}是请求中带入的参数 * method=RequestMethod.GET 捕获get请求的方法 ...
form表单拖拽功能
12-27
本文将深入探讨"form表单拖拽功能"这一主题，结合提供的文件"FormbuildV1.0"，详细解释其背后的技术实现和相关知识点。 首先，我们需要理解HTML表单的基础结构。一个基本的HTML表单通常由`<form>`标签定义，里面...
js清空form表单中的内容示例
10-25
在JavaScript中，清空表单（form）的内容是常见的需求，尤其在用户完成表单提交或者需要重置表单时。本示例提供了一个全面的方法，涵盖了多种表单元素类型，确保可以有效地清除所有相关数据。以下是详细的知识点解析...
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...
form表单回写技术java实现
09-02
在Java Web开发中，表单回写技术是一种常见的前端与后端交互手段，它主要用于将服务器端处理后的数据重新填充到HTML表单中，以便用户查看或者修改。本篇文章将详细解析如何使用Java来实现这一功能。 表单回写的核心...
angularJS提交表单（form）
10-24
这里的`ng-form`定义了一个名为`test`的表单，`ng-model`则将输入框的值与`$scope.a`进行双向绑定。当用户输入时，`a`的值会自动更新。 接着，我们创建了一个自定义指令`test`，该指令与表单关联，通过`require: '...
form表单、修改
weixin_44542048的博客
05-07 4690
一、form表单 form表单有两个属性：action这是提交的地址，有绝对的和相对两种url，method提交表单的方式，提交的方式有两种get和post，form表单提交默认方式是get与 post相比，get更简单也更快，get提交时参数直接暴露在URL上，所以安全性较低，url受长度限制发送大量数据时也不能使用，post是将表单中的数据放在form的数据体中，按照变量和值对象的方式，传递到...
antd获取/更改form表单数据（表单域数据）
最新发布
учёба
10-23 608
【代码】antd获取/更改form表单数据（表单域数据）
From表单修改数据table表格数据改变
weixin_43776272的博客
08-05 459
vue页面弹出框和table表格数据
js入门·表单详解一（修改表单属性，修改表单元素值） .txt
徜徉在微软的陷阱
02-26 1310
其实在javascript入门·Document对象入门讲解(访问表单，创建新页，获取页标题) 一文中，我们已经把表单的一些基本访问等弄清楚了，下面我们深入的学下表单的属性以及对表单元素的简单操作！演示一 ： 根据需求，定做表单你先按下提交提交表单，后退，然后再点修改表单，然后再提交表单，看效果现在的指向是 test.asp ，方法是 post 其实做那么多都没有，直接作两个属性吧
Django修改admin后台管理表单
weixin_30835933的博客
03-21 212
新定义的表单django.forms.ModelForm--做为客户端的控制管理模块django.admin.ModelAdmin --做为服务端的控制在models.py中我有如下的数据库Blog#coding: utf-8from django.db import models# Create your models here.class Blog(models.Model): capt...
ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作
m0_62283830的博客
11-22 6654
ElementUI的Form表单使用slot-scope="scope"获取当前表格行数据实现数据回显、修改表单操作
juqery.form.js在提交表单前修改某个值的方法
热门推荐
arthur.dy.lee的专栏
12-29 2万+
可以在beforeSerialize组装发送的表单值之前修改某些表单的值.也可以在beforeSubmit可以做表单提交前的验证，不通过则可以阻止表单的提交
判断form表单是否修改
05-26
一种判断 form 表单是否修改的方法是在页面加载时记录表单的初始值，然后在表单提交时比较当前值和初始值是否相同，如果不同则表示表单已被修改。可以使用 JavaScript 实现这个功能，具体实现步骤如下： 1. 在页面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值