1、添加按钮:白底黑框,80X30,文本和命名均为“添加”;

2、数据表格(表头):1行5列,灰底黑框的表格作为表头,从左到右每个格子的文字分别为:姓名、性别、年龄、电话和操作:

3、数据表格(表身):一个中继器,中继器里面是一个1行5列,白底黑框的表格,从左到右5个格子分别命名为“姓名”、“性别”、“年龄”、“电话”和“删除”,其中最右边一个格子文字为:删除,字体为蓝色加下划线.

绘制表格

中继器

绘制弹框

(1)4个文本标签的文本分别为姓名、性别、年龄和电话;

(2)4个文本框分别命名为“姓名”“性别”“年龄”和“电话”,一一对应放在文本标签右边

(3)2个矩形中,一个文本和命名均为“确认”,另一个文本和命名均为“取消”。



添加按钮

设置交互样式和交互用例

交互样式为:鼠标悬停和鼠标按下均设置填充颜色为灰色

交互用例为:鼠标单击时显示“弹出框”



中继器设置数据





删除按钮

交互用例设置为:鼠标单击时删除 this 行

确定按钮

交瓦用例设置为:鼠标单击时添加一行数据并隐藏“弹出框”



取消按钮

交瓦用例设置为:鼠标单击时隐藏“弹出框”

预览

如果年龄、电话中不能输入数字,注意切换一下输入法

Axure 绘制表格添加删除的更多相关文章

  1. JavaScript DOM方法表格添加删除

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. WPF下的Richtextbox中实现表格合并,添加删除行列等功能

    .Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...

  3. 编辑 Ext 表格(一)——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  4. 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  5. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  6. Swift - 给表格添加编辑功能(删除,插入)

    1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...

  7. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 数据字典的设计--3.首页添加删除表格(JS实现)

    页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...

  9. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  10. DOM给表格添加新一行和删除整个行的内容

    DOM用appendChild()给表格添加新一行时,要注意,在HTML中没特别设置<thead>,<tbody>时,会自动添加上,所以要选择表格第一个元素在添加tr. // ...

随机推荐

  1. 欧拉序求LCA

    使用欧拉序 st 表 O(1) 求 LCA 欧拉序 st 表求 LCA 一开始是从某篇题解里看到的,后来百度了一下就会了( 这是一种预处理 O(nlogn) ,查询 O(1) 的优秀算法. 什么是欧拉 ...

  2. 题解 AGC054D

    前言 因为本人尚菜,所以本篇文章没有什么数学符号,请大家放心食用. 题目分析 先吐槽一嘴,这个 o 表示 (),这个 x 表示 )(,十分形象. 好,我们先观察原序列,容易得出第一条性质: ox 的加 ...

  3. .NET8依赖注入新特性Keyed services

    什么是Keyed service Keyed service是指,为一个需要注入的服务定义一个Key Name,并使用使用Key Name检索依赖项注入 (DI) 服务的机制. 使用方法 通过调用 A ...

  4. (Good topic)二分法:x的平方根

      计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4输出: 2 示例 2: 输入: 8输出: 2说明: 8 的平方 ...

  5. Windows 11 + Samsung 980 踩坑:在 LocalDB 15.0 实例启动期间出错: 无法启动 SQL Server 进程(附赠 查询指定日期范围内的前1000条SQL执行记录)

    Windows 11 + Samsung 980 踩坑:在 LocalDB 实例启动期间出错: 无法启动 SQL Server 进程 起因 用 Microsoft Visual Studio 2022 ...

  6. 【封装】Splay

    注意确保操作合法性,否则可能陷入死循环 以点权作为排序依据 struct Splay{ #define ls p[u].son[0] #define rs p[u].son[1] #define ma ...

  7. WPF 纯XAML实现NumericUpDown 控件

    本文由 飞羽流星(Flithor/毛茸茸松鼠先生/Squirrel.Downy)原创,欢迎分享转载,但禁止以原创二次发布原文地址:https://www.cnblogs.com/Flithor/arc ...

  8. Go 获取 IP 地址

    1. 获取本地IP地址 使用 net 包可以获取本地机器的 IP 地址.以下是一个获取本地 IP 地址的简单示例: package main import ( "fmt" &quo ...

  9. .NET8顶级调试lldb观察FOH堆字符串分配

    前言 好久没有动用LLDB了,这种未来的下一代高性能调试器应该是用在Linux内核系统的Arm64/Riscv64/X64系统指令集上的,LLDB Debug .NET有点杀鸡用牛刀.本篇通过它来看下 ...

  10. MyBatis-Plus雪花算法实现源码解析

    1. 雪花算法(Snowflake Algorithm) 雪花算法(Snowflake Algorithm)是一种用于生成唯一标识符(ID)的分布式算法.最初由 Twitter 公司开发,用于生成其内 ...