`
yanghui628
  • 浏览: 8622 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

完美支持对table的增删改和showTable数据功能

阅读更多

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Tabel</title>
<script type="text/javascript">
//原型方式
function tableObject(){}
tableObject.prototype.name='';
tableObject.prototype.age='';
tableObject.prototype.sex='';
tableObject.prototype.phone='';
tableObject.prototype.html='';
tableObject.prototype.array=new Array();
tableObject.prototype.insertData=function(tableRow)
{
	tableRow.insertCell().innerHTML=this.name;
	tableRow.insertCell().innerHTML=this.age;
	tableRow.insertCell().innerHTML=this.sex;
	tableRow.insertCell().innerHTML=this.phone;
	tableRow.insertCell().innerHTML=this.html;
	this.array.push(this);	
};
tableObject.prototype.deleteData=function(a)
{
	var rowIndex=a.parentElement.parentElement.rowIndex;
	var tableRow=a.parentElement.parentElement.parentElement;
	tableRow.deleteRow(rowIndex);
	this.array.splice(rowIndex-1,1);
};
tableObject.prototype.updateData=function(a,value)
{	
	var tr=a.parentElement.parentElement;
	tr.cells[0].innerHTML=value.name;
	tr.cells[1].innerHTML=value.age;
	tr.cells[2].innerHTML=value.sex;
	tr.cells[3].innerHTML=value.phone;
	this.array[tr.rowIndex-1]=value;
};
var tableValue=new tableObject();

function insertData()
{
	var tableRow=document.getElementById("table").insertRow();
	tableValue.name='yanghui';
	tableValue.age='25';
	tableValue.sex='女';
	tableValue.phone='13800138000';
	tableValue.html="<a href='javascript:void(0);' onclick='tableValue.deleteData(this)'>删除</a>&nbsp;<a href='javascript:void(0);' onclick='update(this)'>修改</a>";
	tableValue.insertData(tableRow);
	alert("Table总长度"+tableValue.array.length);
}
function update(obj)
{
	var tableValue=new tableObject();
	tableValue.name='杨辉';
	tableValue.age='25';
	tableValue.sex='男';
	tableValue.phone='13800138000';
	tableValue.updateData(obj,tableValue)
}

function showTable()
{
	for(var value in tableValue.array)
	{
		alert("name:"+tableValue.array[value].name+",age:"+tableValue.array[value].age+",sex:"+tableValue.array[value].sex+",phone:"+tableValue.array[value].phone);
	}
}
</script>

</head>
<body>
<input type="button" value="增加行" onclick="insertData();">

<table id="table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>联系电话</th>
</tr>
</table>

<input type="button" value="ShowTeble" onclick="showTable();">
</body>
</html>
0
0
分享到:
评论

相关推荐

    通用WEB表格增删改操作(附源码)

    在Web开发中,数据展示和管理是常见的需求,其中表格是一...通过学习和实践,开发者可以构建出功能丰富的数据管理界面,提升用户体验。提供的"dbgrid"源码是一个很好的学习材料,可以帮助我们深入理解这些技术的运用。

    表格-增删改ergfwrgvrs.zip

    在本项目"表格-增删改ergfwrgvrs.zip"中,我们很显然会看到一个用于展示、编辑和管理表格数据的应用。 首先,让我们从"Vue实现表格的增删改操作"这一描述出发,了解核心概念和技术。在Vue中,数据和视图是紧密绑定...

    Angularjs(增删改+分页+弹框+Sql数据库)

    AngularJS的`ng-repeat`指令用于在DOM中循环渲染数据,而`ng-if`或`ng-show/hide`可以控制元素的显示与隐藏,实现增删改的交互效果。 2. **分页**:分页是大型数据集常见的展示方式,避免一次性加载过多数据导致...

    连接数据库Python+表格动态增删改

    在实际应用中,我们可以结合`QTableView`的信号和槽机制,实现表格数据的动态增删改功能。例如,当用户点击添加按钮时,可以触发一个槽函数,该函数执行相应的SQL插入语句;同样,删除和修改操作也可以通过监听用户...

    源代码(ALV 报表 F4 增删插改按钮功能).pdf

    1. ALV Grid 控件:ALV Grid是SAP ABAP环境中用于显示数据的交互式列表控件,它支持对显示数据的格式化和个性化配置。ALV Grid控件能够为报表提供多种功能,包括排序、分组、汇总等。 2. F4按钮和事件处理:在ALV ...

    PHP网页设计MYSQL数据库增加删改查

    在本项目中,我们主要探讨的是如何利用PHP作为开发语言,与MySQL数据库配合,实现网页上的数据增加(Add)、删除(Delete)、修改(Update)和查询(Select)基本功能,也就是常说的CRUD操作。这一过程是Web开发中的...

    BootStrap实现带有增删改查功能的表格(DEMO详解)

    这个插件提供了丰富的功能,如排序、搜索、分页等,通过引入`bootstrap-table.js`和相关CSS文件,我们可以轻松地将表格升级为一个功能强大的数据展示工具。 总的来说,BootStrap实现带有增删改查功能的表格需要结合...

    mysql触发器之触发器的增删改查操作示例

    触发器的定义可以存储在数据目录下的特定数据库和表文件夹中,如 `/data_folder/database_name/table_name.trg`。此外,也可以通过查询`information_schema`数据库中的`triggers`表来查看触发器的相关信息,包括...

    jQuery对table表格进行增删改查

    以下是对jQuery实现表格增删改查功能的详细说明。 ### 增加记录 增加记录通常涉及在表格的tbody元素中插入新的行(tr)和单元格(td)。首先,我们需要创建一个表单让用户输入新数据,然后通过点击“新增”按钮...

    Mysql增删改(查高级用法)

    MySQL是世界上最流行的关系型数据库管理系统之一,用于存储和管理数据。在本文中,我们将深入探讨其在增、删、改、查方面的高级用法,帮助你更好地理解和掌握MySQL的精髓。 1. **增(Insertion)** 创建新表时,...

    结构化查询语言SQL常用技巧.doc

    DML涉及对数据的增删改操作。INSERT用于插入新记录,UPDATE用于修改现有记录,DELETE用于删除记录。这三种操作对数据库中的行产生直接影响。 3. 事务处理语言(TPL): TPL确保多条SQL语句作为一个整体执行,如...

    jQuery表格特效

    此外,jQuery还可以用于实现表格的可编辑功能,通过监听`click`事件添加编辑和保存按钮,利用`.val()`获取或设置单元格数据,实现数据的增删改。 总的来说,jQuery表格特效是通过其强大的选择器、DOM操作和动画效果...

    MySQL数据库笔试、面试知识合集

    在DML部分,主要关注对表中数据的增删改。插入数据用`INSERT INTO`,可以指定列名和对应的值,或者不指定列名插入所有列。删除数据用`DELETE FROM`,更新数据用`UPDATE`。这些操作都需要注意匹配列名和值,以及可能...

    BigDb海量数据库

    1. **高速的数据增删改操作**:BigDb优化了内部数据结构与算法,使得对数据的修改操作更为迅速。 2. **数据唯一性约束**:确保数据库中的关键字段具有唯一性,避免数据冗余与错误。 3. **兼容关系型与非关系型数据...

    day02-MySQL高级笔记.pdf

    本文档将对 MySQL 的高级知识点进行总结,涵盖了数据库管理、表设计、数据增删改、查询语句、排序、聚合函数、分组、分页查询、约束等方面。 数据库管理 * 创建数据库:使用 `CREATE DATABASE IF NOT EXISTS` 语句...

    数据库系统及原理及MYSQL应用教程 数据库和表的管理 实验报告

    - 实验中要求根据个人姓名创建带有拼音前缀的数据库和表,例如创建名为`zs_studentsdb`的数据库,`zs_student_info`的表,并进行相应的增删改操作。 - 在实验过程中,需要注意列名、数据类型的选择,以及是否允许...

    MySQL笔记.docx

    DML涉及INSERT、DELETE和UPDATE,用于数据的增删改;DQL主要用于查询数据;DCL用于管理用户权限。 在SQL命令行中,系统命令通常大写,命令和名称小写,以分号结束,也可以用`\g`代替。注意避免在命令中使用关键字和...

    mysql常用命令大全-最完整版

    - 使用索引有缺点:可能会减慢数据的增删改速度、占用磁盘空间、增加查询优化器负担。 14. 分析索引效率 - 使用`explain`前缀来分析SQL语句的执行计划。 - `explain`结果含义包括:`table`(表名)、`type`...

    Transwarp Data Hub Version Inceptor使用手册

    同时,手册也提供了数据定义语言(DDL)的使用说明,如创建、删除、修改表和数据库,以及表结构的增删改操作等。 具体到DDL,手册中列出了如下语句的使用方式: - 创建(CREATE)/删除(DROP)/修改(ALTER)/截断...

    MySQL入门很简单-学习笔记_20110913.pdf

    - **字段及数据类型的增删改移**:使用`ALTER TABLE`命令进行相应的操作。 - **更改表的存储引擎**:`ALTER TABLE table_name ENGINE = engine_name;` - **删除表的外键约束**:`ALTER TABLE table_name DROP ...

Global site tag (gtag.js) - Google Analytics