JavaScript实现在线编辑表格

最新推荐文章于 2020-12-19 12:52:53 发布

weidegong

最新推荐文章于 2020-12-19 12:52:53 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript input function button class table

本文链接：https://blog.csdn.net/weidegong/article/details/13408

版权

本文介绍了如何利用JavaScript实现一个在线编辑表格的功能，包括HTML、JS和CSS代码示例。

摘要由CSDN通过智能技术生成

======JavaScript在线表格演示======

注：第一列单击弹出下拉框选择；在表格最后一行，按下“下箭头”可以增加一个新的空行;使用回车键可以向下遍历整个表格

*****=====下列按钮根据需要选定使用======*****

=====另一个实例=====

*****=====下列按钮根据需要选定使用======*****

=====以下为代码清单=====

======OnlineEditTable.html======

<html>
<head>
<!--
* Title:  Table to edit online
* Description: Use to table to input data to a form
* Copyright:  Copyright (c) 2003
* Company:  weide
* @author  weidegong(weidegong@yahoo.com.cn)
* @version  3.2
* Function  动态可编辑表格构成的表单，其中输入域及其输入形式可根据实际需要自行设置（参考本例Select),IE6测试通过
   将script和style定义放在页面head区；将如<table></table>区域拷贝至需要使用该表格的位置即可;最下方为参考按钮
   为了能在同一Form中使用多个表格，故将<table>放在form中，而不是将<TBODY>放在form中，这样导致提交的输入域的第一个值无效，如在JSP中：String strxs[]=request.getParameterValues("x");//则strxs[0]即为无效数据

   thead.tr.th:定义表头，可以设置相应的列宽；th的数目需要同下面的td数目相同，以一一对应；其中"X"是固定列
   thead.tr.td.<input ... name=x>设置相应数据列对应的输入域的名字；其中第一列用于显示一个选择框
   tableData,默认<TR>的样式单名称；tableDataHit,高亮度显示时<TR>采用的样式单
   inputTableData,显示数据时表格中input输入域使用的样式单；inputTableDataHit,TR高亮度显示时，input使用的样式单
* @History  1.0 从网上下载了例子，并略作修改
   2.0 使用CSS表单美化界面；增加一个模拟可编辑Select下拉框
   3.0 将addRow,deleteRow修改为带有对象类型参数的函数，使得在同一界面可使用可编辑表格的多个实例
   3.1 将addRow,deleteRow函数的参数修改为表格对象，更加方便；整理出online