html实现数据的增删查改

关于数据的修改,保存,添加,删除

 

 

一,要求:

  做出一个表格,在表格中完成数据的添加,删除,修改,排序,以及重复检查。

二,实现过程

  在做这个实验是在老师把表格给弄好后,以及完成表格的删除行和添加数据的基础上实现的。其中我自己完善的有关于数据的保存,修改,和如果当有序号重复时,其会报错,也就是这个程序是以序号不重复为标准进行其他的操作。运用了onclick的事件响应,通过在表格中进行响应其他的操作。

三,实现遇到的问题:

  在实现完成修改操作时,我要将table中的数据返回到input标签中进行修改,所以这就用到了innerHTML属性,在这里innerHTML扮演着两个角色,一个是获取对象的内容,二是向对象中插入内容,var a=atr.rows[i].col[0].innerHTML;这是获取对象表格中的属性,document.getElementById(“xuhao”).innerHTML=a;这是设置input中的内容为表格的中所要修改的内容。还有就是需要知道innerHTML和innerText的区别,innerText方法可以获取或者更改某元素的文本字符串内容,但是innerText不是W3C的标准方法,所以不受FireFox浏览器的支持,兼容IE和谷歌浏览器。innerHTML同样可以获得元素内的html内容包括字符串和html标签元素,innerHTML是html的特有属性,虽然其也不是W3C的标准属性,但是所有的主流浏览器都能使用,textContent与innerText的作用相同,但是唯一的区别是,textContent能被FireFox支持,但是innerText不能,但是textContent只能被FreFox支持。

   第二个问题就是保存:在做保存是,就是要把更改的内容给保存,并且在下次打开的时候能够把保存的内容也打开,这就要用到window对象的open方法,和document对象的open,write,和close方法,window的open方法有三个参数,其格式是window.open(“url”,”网页名字”,设置的属性);url是所要打开的网页的名字,网页名字:是为打开的这个网页重新改的名字。设置属性:指的是设置所要打开的网页的属性。Document的write方法是将一定的内容写到所打开的文档中,其格式是document.write(内容);内容:就是你要添加的内容。

Document.open(“格式”,’replace’);其中格式:是指你所要插入的文档的格式(比如说text/html格式)。

,遇到问题及为解决的问题

  在这里没有解决的问题就是在保存时如何不用新建一个网页将其保存,而是直接就保存到原网页,更改其代码。

五,心得体会

   突然觉的自己完成一个功能是一件很开心的事,同时也发现了一些以前一个错误的想法,就是写总结浪费时间,其实写总结有利于对知识点的掌握,同时锻炼如何很好的表达自己的思想,不至于只会写代码,而不知道其思想过程,和也没有思考其中的不足。

   在下面的代码中可能会遇到一个问题,就是在保存时如果没有保存到以前的网页所在的路径下,那么打开新保存的页面可能会出现排版的问题,那是因为是用的时bootstrap框架布局,在保存是没有在该框架的文件路径下,所以导致排版不对,解决办法只需要把其保存到原来的路径下就行。

六,实验截图

执行插入操作


 

执行删除操作


<

  • 9
    点赞
  • 91
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
基于HTML表格的数据增删查改分页查询是通过HTML、CSS、JavaScript等前端技术结合后端语言实现的一个功能强大的数据管理功能。在HTML中,我们可以通过<table>标签来创建表格,通过<tr>、<th>和<td>标签来创建表格行、表头和单元格。在数据增删查改方面,可以通过JavaScript来实现客户端的交互和数据处理,也可以通过后端语言比如PHP来实现数据库的交互。 数据的增加可以通过在表格最后一行添加一个“新增”按钮,点击按钮后可以弹出一个表单用于输入新数据,然后通过JavaScript将新数据插入到表格中,或者通过后端语言将新数据插入到数据库中并刷新表格。 数据的删除可以通过在每行数据后添加一个“删除”按钮,点击按钮后可以通过JavaScript提示用户确认是否删除,然后再从表格中删除对应的数据,或者通过后端语言删除数据库中对应的数据并刷新表格。 数据的查询可以通过在页面上添加搜索框,用户可以在搜索框中输入关键词,然后通过JavaScript过滤表格中的数据并展示符合条件的数据,或者通过后端语言从数据库中查询符合条件的数据并刷新表格。 数据修改可以通过在每行数据后添加一个“编辑”按钮,点击按钮后可以弹出一个表单用于修改数据,然后通过JavaScript实现数据修改并更新到表格中,或者通过后端语言修改数据库中对应的数据并刷新表格。 对于分页查询,可以通过JavaScript实现前端分页功能,也可以通过后端语言实现后端分页功能,从而实现大量数据的分页展示和查询。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值