JavaScript实现在线编辑表格

最新推荐文章于 2024-10-07 09:24:46 发布
最新推荐文章于 2024-10-07 09:24:46 发布
阅读量560 收藏
点赞数
分类专栏： java&script 文章标签： javascript input class function date generator

<HTML>

  <HEAD>

  <META content="text/html; charset=gb2312" http-equiv=Content-Type>

  <STYLE type=text/css>BODY {

  BACKGROUND: white; COLOR: black; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px

  }

  .tableData {

  BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px

  }

  .tableDataSel {

  BACKGROUND: #6090d0; BORDER-BOTTOM: #6090d0 1px dashed; BORDER-LEFT: #6090d0 1px dashed; BORDER-RIGHT: #6090d0 1px dashed; BORDER-TOP: #6090d0 1px dashed; COLOR: white; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px

  }

  .tableDataHit {

  BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px

  }

  .tableDataOver {

  BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px

  }

  .controlPanel {

  BACKGROUND: silver; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px

  }

  .controlPanelMouseOver {

  BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px

  }

  .delMouseOver {

  BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px

  }

  .scheduleButtonVisible {

  BACKGROUND: silver; BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: gray 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: webdings; FONT-SIZE: 12px

  }

  </STYLE>

  <SCRIPT language=javascript>

  var modified=0

  var currentLine=-1//该变量似乎保存"ln"属性；lightOn函数中line记录实际行数

  var line=-1;

  function lightOn(ln)

  {

  if (ln==null)

  ln=parseInt(event.srcElement.ln,10)

  for (i=1;i<PLList.rows.length;i++)

  if (tdt[i].ln==ln)

  line=i

  cln=currentLine

  oldLine=-1

  for (i=1;i<PLList.rows.length;i++)

  if (tdt[i].ln==cln)

  oldLine=i

  if (line==oldLine)

  return

  //if td <0 then only clear all title

  if (line>0)

  {

  document.all.tdt[line].className="tableDataHit";

  document.ecform("date")[line].className="tableDataHit";

  document.ecform("diagnosis")[line].className="tableDataHit";

  document.ecform("medication")[line].className="tableDataHit";

  if (oldLine>0)

  {

  document.all.tdt[oldLine].className="tableData";

  document.ecform("date")[oldLine].className="tableData";

  document.ecform("diagnosis")[oldLine].className="tableData";

  document.ecform("medication")[oldLine].className="tableData";

  }

  currentLine=ln

  }

  }

  function delIt()

  {

  line=parseInt(event.srcElement.ln,10)

  if (line>0)

  for (i=1;i<PLList.rows.length;i++)

  if (tdt[i].ln==line)

  {

  if (document.ecform.diagnosis[i].value.length>0 || document.ecform.medication[i].value.length>0 || document.ecform.date[i].value.length>0)

  if (!confirm("Are you sure you want to delete this record?"))

  return

  PLList.deleteRow(i)

  }

  }

  function modifiedIt(field)

  {

  // field.value=checkText(field.value);

  modified=1

  line=parseInt(event.srcElement.ln,10)

  if (line>0)

  for (i=1;i<PLList.rows.length;i++)

  if (tdt[i].ln==line)

  document.ecform.edit[i].value=1

  }

  function newHospitalVisit()

  {

  newRow=PLList.insertRow(PLList.rows.length);

  newRow.id="tdt";

  newRow.ln=allCount;

  newRow.bgColor="#e0e0e0";

  newRow.className="tableData";

  newRow.οnclick=lightOn;

  c1=newRow.insertCell(0);

  c1.id="delItem";

  c1.ln=allCount;

  c1.className="scheduleButtonVisible";

  c1.οnclick=delIt;

  c1.οnmοuseοver=mouseOver;

  c1.οnmοuseοut=mouseOut;

  c1.innerHTML="<input type=hidden name=PLID value=0><input type='hidden' name='edit' value=0>";

  c2=newRow.insertCell(1);

  c2.ln=allCount;

  c2.innerHTML="<input type=text size=10 maxlength=10 name=date ln="+allCount+" class=tableData οnkeyup='modifiedIt()'>"

  c3=newRow.insertCell(2);

  c3.ln=allCount;

  c3.innerHTML="<input type=text size=25 maxlength=50 name=diagnosis ln="+allCount+" class=tableData οnkeyup='modifiedIt()'>"

  c4=newRow.insertCell(3);

  c4.ln=allCount;

  c4.innerHTML="<input type=text size=58 maxlength=100 name=medication ln="+allCount+" class=tableData οnkeyup='modifiedIt()'>"

  allCount++

  }

  function mouseOver()

  {

  event.srcElement.className="delMouseOver"

  }

  function mouseOut()

  {

  event.srcElement.className="scheduleButtonVisible"

  }

  </SCRIPT>

  </HEAD>

  <BODY bgColor=white>

  <FORM method=post name=ecform>

  <META content="MSHTML 5.00.2920.0" name=GENERATOR>

  <DIV id=div1

  style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 658px">

  <TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver

  cellPadding=2 cellSpacing=1 cols=1 id=PLList rules=rows width="100%">

  <TBODY>

  <TR bgColor=#0a6846 id=tdt>

  <TH width=10><FONT color=white>X

  <INPUT name=PLID type=hidden>

  <INPUT

  name=edit type=hidden>

  </FONT></TH>

  <TH width="10%">

  <INPUT name=date type=hidden>

  <FONT color=white>Date </FONT>

  <TH width="30%">

  <INPUT name=diagnosis type=hidden>

  <FONT

  color=white>Diagnosis </FONT>

  <TH width="60%">

  <INPUT name=medication type=hidden>

  <FONT

  color=white>Medication </font>

  </TR>

  <TR bgColor=#e0e0e0 class=tableData id=tdt οnclick=lightOn() ln="1">

  <TD class=scheduleButtonVisible οnclick=delIt() οnmοuseοut=mouseOut()

  οnmοuseοver=mouseOver() ln="1"><FONT size=2>

  <INPUT name=PLID type=hidden

  value=54 ln="1">

  <INPUT name=edit type=hidden value=0>

  </FONT></TD>

  <TD ln="1">

  <INPUT class=tableData maxLength=10 name=date

  οnkeyup=modifiedIt(this) size=10 ln="1">

  </TD>

  <TD ln="1">

  <INPUT class=tableData maxLength=50 name=diagnosis

  οnkeyup=modifiedIt(this) size=25 value="what do you think of it?"

  ln="1">

  </TD>

  <TD ln="1">

  <INPUT class=tableData maxLength=100 name=medication

  οnkeyup=modifiedIt(this) size=58 value="like it?" ln="1">

  </TD>

  </TR>

  <TR bgColor=#e0e0e0 class=tableData id=tdt οnclick=lightOn() ln="2">

  <TD class=scheduleButtonVisible οnclick=delIt() οnmοuseοut=mouseOut()

  οnmοuseοver=mouseOver() ln="2"><FONT size=2>

  <INPUT name=PLID type=hidden

  value=55 ln="2">

  <INPUT name=edit type=hidden value=0>

  </FONT></TD>

  <TD ln="2">

  <INPUT class=tableData maxLength=10 name=date

  οnkeyup=modifiedIt(this) size=10 value=01/01/1999 ln="2">

  </TD>

  <TD ln="2">

  <INPUT class=tableData maxLength=50 name=diagnosis

  οnkeyup=modifiedIt(this) size=25 value="it`s a test" ln="2">

  </TD>

  <TD ln="2">

  <INPUT class=tableData maxLength=100 name=medication

  οnkeyup=modifiedIt(this) size=58 value="how about it?" ln="2">

  </TD>

  </TR>

  <TR bgColor=#e0e0e0 class=tableData id=tdt οnclick=lightOn() ln="3">

  <TD class=scheduleButtonVisible οnclick=delIt() οnmοuseοut=mouseOut()

  οnmοuseοver=mouseOver() ln="3"><FONT size=2>

  <INPUT name=PLID type=hidden

  value=56 ln="3">

  <INPUT name=edit type=hidden value=0>

  </FONT></TD>

  <TD ln="3">

  <INPUT class=tableData maxLength=10 name=date

  οnkeyup=modifiedIt(this) size=10 value=02/01/2000 ln="3">

  </TD>

  <TD ln="3">

  <INPUT class=tableData maxLength=50 name=diagnosis

  οnkeyup=modifiedIt(this) size=25 value="another test" ln="3">

  </TD>

  <TD ln="3">

  <INPUT class=tableData maxLength=100 name=medication

  οnkeyup=modifiedIt(this) size=58 ln="3">

  </TD>

  </TR>

  </TBODY>

  </TABLE>

  <SCRIPT>

  allCount=4

  </SCRIPT>

  <TABLE align=center border=1 borderColorDark=white borderColorLight=gray

  cellPadding=1 cellSpacing=1 class=controlPanel cols=4 rules=all width="100%"

  nowrap>

  <TBODY>

  <TR>

  <TD align=middle class=controlPanel οnclick=newHospitalVisit()

  οnmοuseοut="this.className='controlPanel'"

  οnmοuseοver="this.className='controlPanelMouseOver'"><FONT size=2>Add a New

  Record, click here</FONT></TD>

  </TR>

  </TBODY>

  </TABLE>

  </DIV>

  </FORM>

  </BODY>

  </HTML>
 

Suncanoe
关注
专栏目录
html excel 在线编辑,利用js实现在线编辑excel表格代码
weixin_40004212的博客
05-31 1639
特效描述：利用js实现 在线编辑 excel 表格代码。利用js实现在线编辑excel表格代码代码结构1. 引入CSS2. 引入JS3. HTML代码function load(){x.spreadsheet('#x-spreadsheet-demo').loadData({freeze: 'C3',styles: [{bgcolor: '#f4f5f8',textwrap: true,colo...
JavaScript实现动态创建表格
weixin_51688356的博客
02-06 1792
使用JavaScript动态创建表格。
html+javascript实现可编辑表格
热门推荐
幸福的使者
08-26 2万+
功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格失去焦点时，保存输入的内容。 点击增加行，在table的末尾增加一行；点击删除行，删除table中最末尾的一行。       [html] view plaincopyprint? >     html xmlns="http://www.w3.org/1999/xhtml">   
jQuery实现可编辑表格
BarryLee的博客
10-15 6161
可编辑表格，这个东西听起来挺高大上，其实用jQuery来实现，了解一下思路，就很简单 1.事实上是编辑td里面的内容，所以给他一个双击事件 2.双击完了这个td将其变为一个input，里面的值还保留着 3.最后就是失去焦点的时候还原，就欧克了 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEn...
HTML实现可编辑表格
weixin_52909924的博客
04-11 3366
（1）页面中的数据表格通常承载了用户所需的数据，通常用户需要根据实际情况对部分数据进行修改。（2）当点击表格中可编辑数据时，在当前单元格中显示文本框并在其中显示原数据，从而为用户提供修改该数据的输入域。（a）在编辑模式下点击文本框之外的任何区域即可确认输入。（b）在编辑模式下输入数据不符合要求时，应该给出适当的提示，并强制改正后方可确认输入。
JavaScript实现可编辑的表格
张兴军的博客
01-10 2060
一、创建js文件（JavaScript文件）   /* * 创建人：张兴军 * 说明：可编辑的表格 */ $(function () { // 相当于在页面中的body标签加上onload事件 $(".caname").click(function () { // 给页面中有caname类的标签加上click函数 var objTD = $(th...
JavaScript简单表格编辑功能实现方法
12-03
本文将通过一个实例详细介绍如何使用JavaScript实现简单的表格编辑功能，包括插入行、删除行、插入单元格、删除单元格、创建表头以及删除表头等操作。 首先，我们需要一个包含表格的HTML结构。在示例中，我们有一个...
使用JavaScript实现表格编辑器(实例讲解)
10-19
### JavaScript实现 最后，我们通过JavaScript来实现表格编辑器的核心功能。这些功能包括在表格单元格中添加输入框、捕获输入、以及将编辑后的数据保存回表格单元格。 ```javascript function tableBlurOperator...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 1024
Vue 2 中使用 Vue I18n 插件实现中英文切换
解释器、预处理、main函数
最新发布
编程语言技巧经验分享
10-07 1050
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Vue根实例、实例总结
m0_54007573的博客
10-04 518
Vue根实例、实例总结
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 489
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 607
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1269
vue-live2d看板娘集成方案设计使用教程
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 6025
Webpack 打包后文件过大，如何优化？
如何使用Redisson的布隆过滤器？
付聪
10-02 469
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1231
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
使用JavaScript实现表格编辑功能
"通过JavaScript实现表格的编辑功能" 在网页开发中，JavaScript是一种常用的客户端脚本语言，用于增加网页的交互性。在这个示例中，我们看到一个简单的HTML结构，包含了一个表格（`<table>`），以及两个外部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值