可编辑的Table供大家学习

zygtp 2003-07-07 11:16:52
<html>
<head>
<title>郑亚刚制作</title>
<SCRIPT language="javascript">
var curSrc=null;
function EditCell(){
var i=0,j=0;
var wid=0;
var Val='';
var Scr=event.srcElement;
if(Scr.tagName=="TD")
{
wid=Scr.clientWidth-3;
Val=Scr.innerHTML;
Scr.innerHTML="<input id='InputText' style='border:0px none; BACKGROUND-COLOR: transparent;#3399FF; height:14px;font-family:宋体;font-size:12px;color:#000000' onblur='return CellOut()' type='text' name='T1' size='10' "+(wid==0?"":"style='width:"+wid+"'") +" Value='" +MyTable.rows[i].cells[j].innerText+"'>";
InputText.value=Val;
curSrc=Scr;
Scr.children[0].focus();
}
}
function CellOut()
{
var Scr=event.srcElement;
var Val='';
if (curSrc)
{
Val=Scr.value;
curSrc.innerHTML=Val;
}

}

</SCRIPT>
</head>
<body>
<table id='MyTable' style='BORDER-COLLAPSE: collapse' border="1" width="100%" style="font-family:宋体;font-size:14px">
<tr>
<td width="14%" OnClick="return EditCell()">1</td>
<td width="14%" OnClick="return EditCell()">2</td>
<td width="14%" OnClick="return EditCell()">3</td>
<td width="14%" OnClick="return EditCell()">4</td>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="15%" OnClick="return EditCell()">6</td>
<td width="15%" OnClick="return EditCell()">7</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="14%" OnClick="return EditCell()">6</td>
<td width="14%" OnClick="return EditCell()">7</td>
<td width="14%" OnClick="return EditCell()">8</td>
<td width="14%" OnClick="return EditCell()">9</td>
<td width="15%" OnClick="return EditCell()">54</td>
<td width="15%" OnClick="return EditCell()">346</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">1</td>
<td width="14%" OnClick="return EditCell()">2</td>
<td width="14%" OnClick="return EditCell()">3</td>
<td width="14%" OnClick="return EditCell()">4</td>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="15%" OnClick="return EditCell()">6</td>
<td width="15%" OnClick="return EditCell()">7</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="14%" OnClick="return EditCell()">6</td>
<td width="14%" OnClick="return EditCell()">7</td>
<td width="14%" OnClick="return EditCell()">8</td>
<td width="14%" OnClick="return EditCell()">9</td>
<td width="15%" OnClick="return EditCell()">54</td>
<td width="15%" OnClick="return EditCell()">346</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">1</td>
<td width="14%" OnClick="return EditCell()">2</td>
<td width="14%" OnClick="return EditCell()">3</td>
<td width="14%" OnClick="return EditCell()">4</td>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="15%" OnClick="return EditCell()">6</td>
<td width="15%" OnClick="return EditCell()">7</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="14%" OnClick="return EditCell()">6</td>
<td width="14%" OnClick="return EditCell()">7</td>
<td width="14%" OnClick="return EditCell()">8</td>
<td width="14%" OnClick="return EditCell()">9</td>
<td width="15%" OnClick="return EditCell()">54</td>
<td width="15%" OnClick="return EditCell()">346</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">1</td>
<td width="14%" OnClick="return EditCell()">2</td>
<td width="14%" OnClick="return EditCell()">3</td>
<td width="14%" OnClick="return EditCell()">4</td>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="15%" OnClick="return EditCell()">6</td>
<td width="15%" OnClick="return EditCell()">7</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="14%" OnClick="return EditCell()">6</td>
<td width="14%" OnClick="return EditCell()">7</td>
<td width="14%" OnClick="return EditCell()">8</td>
<td width="14%" OnClick="return EditCell()">9</td>
<td width="15%" OnClick="return EditCell()">54</td>
<td width="15%" OnClick="return EditCell()">346</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">1</td>
<td width="14%" OnClick="return EditCell()">2</td>
<td width="14%" OnClick="return EditCell()">3</td>
<td width="14%" OnClick="return EditCell()">4</td>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="15%" OnClick="return EditCell()">6</td>
<td width="15%" OnClick="return EditCell()">7</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="14%" OnClick="return EditCell()">6</td>
<td width="14%" OnClick="return EditCell()">7</td>
<td width="14%" OnClick="return EditCell()">8</td>
<td width="14%" OnClick="return EditCell()">9</td>
<td width="15%" OnClick="return EditCell()">54</td>
<td width="15%" OnClick="return EditCell()">346</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">1</td>
<td width="14%" OnClick="return EditCell()">2</td>
<td width="14%" OnClick="return EditCell()">3</td>
<td width="14%" OnClick="return EditCell()">4</td>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="15%" OnClick="return EditCell()">6</td>
<td width="15%" OnClick="return EditCell()">7</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="14%" OnClick="return EditCell()">6</td>
<td width="14%" OnClick="return EditCell()">7</td>
<td width="14%" OnClick="return EditCell()">8</td>
<td width="14%" OnClick="return EditCell()">9</td>
<td width="15%" OnClick="return EditCell()">54</td>
<td width="15%" OnClick="return EditCell()">346</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">1</td>
<td width="14%" OnClick="return EditCell()">2</td>
<td width="14%" OnClick="return EditCell()">3</td>
<td width="14%" OnClick="return EditCell()">4</td>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="15%" OnClick="return EditCell()">6</td>
<td width="15%" OnClick="return EditCell()">7</td>
</tr>
<tr>
<td width="14%" OnClick="return EditCell()">5</td>
<td width="14%" OnClick="return EditCell()">6</td>
<td width="14%" OnClick="return EditCell()">7</td>
<td width="14%" OnClick="return EditCell()">8</td>
<td width="14%" OnClick="return EditCell()">9</td>
<td width="15%" OnClick="return EditCell()">54</td>
<td width="15%" OnClick="return EditCell()">346</td>
</tr>
</table>
</body>
</html>
...全文
558 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
zygtp 2003-07-09
  • 打赏
  • 举报
 回复
只要加上添加行、删除行、添加列、删除列就类似delphi的Stringgrid，甚至可以作成Excel，作用可大了，具体用途自己想想吧！
fervv 2003-07-08
  • 打赏
  • 举报
 回复
谢谢楼主
nhconch 2003-07-08
  • 打赏
  • 举报
 回复
很好！
lidongan 2003-07-08
  • 打赏
  • 举报
 回复
什么用处搂住说明一下吧。不知道怎么用的
wind0209 2003-07-07
  • 打赏
  • 举报
 回复
这个真正的用途是.....，虽然，说你做出这个效果费了些心思。
laurel168 2003-07-07
  • 打赏
  • 举报
 回复
什么东东啊！！
BootStrapTable表格利器通用教材
开发响应式界面，固定表头，完全可配置，支持data属性，显示/隐藏列，显示/隐藏表头，使用AJAX获取JSON数据，点击表头可简单的进行排序，支持自定义列显示，支持单/复选，强大的分页功能，支持名片布局，支持多语言 ...
使html表格可编辑状态,js+Html实现表格可编辑操作
本文实例为大家分享了js+Html实现表格可编辑操作的具体代码，供大家参考，具体内容如下功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格失去焦点时，保存输入的内容。点击增加行，在table的末尾...
bootstrap表格 行编辑状态_详解bootstrap table双击可编辑、添加、删除行
bootstrap table实现双击可编辑、添加、删除行功能本文实例为大家分享了bootstrap table双击可编辑的具体代码，供大家参考，具体内容如下html：名称值操作删除添加js：function save_para_table(){var tableinfo = ...
vue+ElementUI实现可编辑表格的方法
这里提供两种可编辑表格的实现方法，供大家学习参考。 方法一：点击即编辑，离开则提交 HTML代码片段： // 表格 <el-table :data="tableData" style="width: 100%" highlight-current-row @row-click=...
Bootstrap-Table简单使用
Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，能够实现数据异步获取，编辑，排序等一系列功能，最可贵的是，只需要一些简单的配置就可以实现一个功能完备的在线表格。 准备 不同于...
CSS

61,116

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章