Axure 绘制表格添加删除
1、添加按钮:白底黑框,80X30,文本和命名均为“添加”;
2、数据表格(表头):1行5列,灰底黑框的表格作为表头,从左到右每个格子的文字分别为:姓名、性别、年龄、电话和操作:
3、数据表格(表身):一个中继器,中继器里面是一个1行5列,白底黑框的表格,从左到右5个格子分别命名为“姓名”、“性别”、“年龄”、“电话”和“删除”,其中最右边一个格子文字为:删除,字体为蓝色加下划线.
绘制表格

中继器

绘制弹框
(1)4个文本标签的文本分别为姓名、性别、年龄和电话;
(2)4个文本框分别命名为“姓名”“性别”“年龄”和“电话”,一一对应放在文本标签右边
(3)2个矩形中,一个文本和命名均为“确认”,另一个文本和命名均为“取消”。


添加按钮
设置交互样式和交互用例
交互样式为:鼠标悬停和鼠标按下均设置填充颜色为灰色
交互用例为:鼠标单击时显示“弹出框”


中继器设置数据



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

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


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

预览

如果年龄、电话中不能输入数字,注意切换一下输入法
Axure 绘制表格添加删除的更多相关文章
- JavaScript DOM方法表格添加删除
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- WPF下的Richtextbox中实现表格合并,添加删除行列等功能
.Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...
- 编辑 Ext 表格(一)——— 动态添加删除行列
一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行 gridS ...
- 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
- Swift - 给表格添加编辑功能(删除,插入)
1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 数据字典的设计--3.首页添加删除表格(JS实现)
页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
- DOM给表格添加新一行和删除整个行的内容
DOM用appendChild()给表格添加新一行时,要注意,在HTML中没特别设置<thead>,<tbody>时,会自动添加上,所以要选择表格第一个元素在添加tr. // ...
随机推荐
- 从这里开始,跟我一起搞懂 MySQL!
提前申明:<MySQL 基础实战>系列是学习极客时间林晓斌的<MySQL实战45讲>的整理和总结,希望大家仅做为学习使用! 架构示意图 Server 层:包括连接器.查询缓存. ...
- CSS 也能实现 if 判断?实现动态高度下的不同样式展现
最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器 ...
- HTML基础_01
HTML 基础_01 01.初识 HTML 什么是 HTML! Hyper Text Markup Language(超文本标记语言).超文本包括文字.图片.音频.视频.动画等. HTML5,提供了一 ...
- two-pointer 算法
介绍 双指针算法是一种通过设置两个指针不断进行单向移动来解决问题的算法. 它包含两种形式: 两个指针分别指向不同的序列.比如:归并排序的合并过程. 两个指针指向同一个序列.比如:快速排序的划分过程. ...
- AcWing 368. 银河
原本是一个差分约束的问题,但是由于数据过大可能导致\(spfa\)被卡,而由于这道题的边权只有\(0,1\)两种,比较特殊,所以使用\(tarjan\)求连通分量,缩点,递推的方式也能完成,时间复杂度 ...
- # [AI]多模态聚类能力助力AI完成自主意识测试
引言 探讨人工智能是否能形成自我意识,是一个当前AI领域一个重要而又复杂的问题.随着深度学习和强化学习技术的不断进步,计算机在视觉识别.语音识别和控制机器人等方面都已取得长足的进展,模拟和超越人类的一 ...
- 安装Tensorflow-gpu版本
下载cuda 链接:https://developer.nvidia.com/cuda-10.0-download-archive?target_os=Windows&target_arch= ...
- SpringBoot整合SpringSecurity实现前后端分离认证授权
1.什么是SpringSecurity? Spring Security是一个功能强大且高度可定制的身份验证和访问控制框架.它实际上是保护基于spring的应用程序的标准. Spring Securi ...
- DBeaver连接国产数据库OceanBase,以及Python连接,解决ModuleNotFoundError: No module named '_jpype'
DBeaver连接OceanBase 参考:https://www.modb.pro/db/365929 用户名的格式为: 数据库用户名@租户名#集群名 Python连接OceanBase 参考:ht ...
- 浅谈树形DP
树形DP是动态规划中最难也最常考的内容.具有DP和图论相结合的特点. 但从本质上来说,树形DP只不过是一种线性DP,只是将它与搜索结合起来了而已. 树形DP的基本步骤 读图 树形DP的题目中,通常会给 ...