- 浏览: 403709 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
qiuqinjun:
你好,项目的文献能否打包学习下呢
java定时任务管理实现 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
使用jQuery Autocomplete(自动完成)插件 -
CommonAccount:
我的showModalDialog() 传对象参数,在子窗口用 ...
JS中showModalDialog (模态窗口)详细使用 -
wyfn18:
very good
使用jQuery Autocomplete(自动完成)插件 -
jiangqingtian:
xiexie
使用jQuery Autocomplete(自动完成)插件
实现可视化编辑表格操作...
HTML文件:
//下面为引入所用的JS
GridEdit.js
HTML文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>编辑表格数据</title> <style type="text/css"> <!-- body,div,p,ul,li,font,span,td,th{ font-size:10pt; line-height:155%; } table{ border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: #CCCCCC; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; } td{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } .EditCell_TextBox { width: 90%; border:1px solid #0099CC; } .EditCell_DropDownList { width: 90%; } --> </style> </head> <body> <form id="form1" name="form1" method="post" action=""> <h3>可编辑的表格</h3> <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct"> <tr> <td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td> <td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td> <td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品名称</td> <td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td> <td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td> <td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td> <td bgcolor="#FFFFFF">1</td> <td bgcolor="#FFFFFF" Value="c">C</td> <td bgcolor="#FFFFFF">0</td> <td bgcolor="#FFFFFF">0</td> <td bgcolor="#FFFFFF">0</td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td> <td bgcolor="#FFFFFF">2</td> <td bgcolor="#FFFFFF" Value="d">D</td> <td bgcolor="#FFFFFF">0</td> <td bgcolor="#FFFFFF">0</td> <td bgcolor="#FFFFFF">0</td> </tr> </table> <br /> <input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" /> <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" /> </form> <script language="javascript" src="GridEdit.js"></script> <script language="javascript"> var tabProduct = document.getElementById("tabProduct"); // 设置表格可编辑 // 可一次设置多个,例如:EditTables(tb1,tb2,tb2,......) EditTables(tabProduct); </script> </body> </html>
//下面为引入所用的JS
GridEdit.js
/** * JS实现可编辑的表格 * 用法:EditTables(tb1,tb2,tb2,......); * Create by Senty at 2008-04-12 **/ //设置多个表格可编辑 function EditTables(){ for(var i=0;i<arguments.length;i++){ SetTableCanEdit(arguments[i]); } } //设置表格是可编辑的 function SetTableCanEdit(table){ for(var i=1; i<table.rows.length;i++){ SetRowCanEdit(table.rows[i]); } } function SetRowCanEdit(row){ for(var j=0;j<row.cells.length; j++){ //如果当前单元格指定了编辑类型,则表示允许编辑 var editType = row.cells[j].getAttribute("EditType"); if(!editType){ //如果当前单元格没有指定,则查看当前列是否指定 editType = row.parentNode.rows[0].cells[j].getAttribute("EditType"); } if(editType){ row.cells[j].onclick = function (){ EditCell(this); } } } } //设置指定单元格可编辑 function EditCell(element, editType){ var editType = element.getAttribute("EditType"); if(!editType){ //如果当前单元格没有指定,则查看当前列是否指定 editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType"); } switch(editType){ case "TextBox": CreateTextBox(element, element.innerHTML); break; case "DropDownList": CreateDropDownList(element); break; default: break; } } //为单元格创建可编辑输入框 function CreateTextBox(element, value){ //检查编辑状态,如果已经是编辑状态,跳过 var editState = element.getAttribute("EditState"); if(editState != "true"){ //创建文本框 var textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.className="EditCell_TextBox"; //设置文本框当前值 if(!value){ value = element.getAttribute("Value"); } textBox.value = value; //设置文本框的失去焦点事件 textBox.onblur = function (){ CancelEditCell(this.parentNode, this.value); } //向当前单元格添加文本框 ClearChild(element); element.appendChild(textBox); textBox.focus(); textBox.select(); //改变状态变量 element.setAttribute("EditState", "true"); element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex); } } //为单元格创建选择框 function CreateDropDownList(element, value){ //检查编辑状态,如果已经是编辑状态,跳过 var editState = element.getAttribute("EditState"); if(editState != "true"){ //创建下接框 var downList = document.createElement("Select"); downList.className="EditCell_DropDownList"; //添加列表项 var items = element.getAttribute("DataItems"); if(!items){ items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems"); } if(items){ items = eval("[" + items + "]"); for(var i=0; i<items.length; i++){ var oOption = document.createElement("OPTION"); oOption.text = items[i].text; oOption.value = items[i].value; downList.options.add(oOption); } } //设置列表当前值 if(!value){ value = element.getAttribute("Value"); } downList.value = value; //设置创建下接框的失去焦点事件 downList.onblur = function (){ CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text); } //向当前单元格添加创建下接框 ClearChild(element); element.appendChild(downList); downList.focus(); //记录状态的改变 element.setAttribute("EditState", "true"); element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex); } } //取消单元格编辑状态 function CancelEditCell(element, value, text){ element.setAttribute("Value", value); if(text){ element.innerHTML = text; }else{ element.innerHTML = value; } element.setAttribute("EditState", "false"); //检查是否有公式计算 CheckExpression(element.parentNode); } //清空指定对象的所有字节点 function ClearChild(element){ element.innerHTML = ""; } //添加行 function AddRow(table, index){ var lastRow = table.rows[table.rows.length-1]; var newRow = lastRow.cloneNode(true); table.tBodies[0].appendChild(newRow); SetRowCanEdit(newRow); return newRow; } //删除行 function DeleteRow(table, index){ for(var i=table.rows.length - 1; i>0;i--){ var chkOrder = table.rows[i].cells[0].firstChild; if(chkOrder){ if(chkOrder.type = "CHECKBOX"){ if(chkOrder.checked){ //执行删除 table.deleteRow(i); } } } } } //提取表格的值,JSON格式 function GetTableData(table){ var tableData = new Array(); alert("行数:" + table.rows.length); for(var i=1; i<table.rows.length;i++){ tableData.push(GetRowData(tabProduct.rows[i])); } return tableData; } //提取指定行的数据,JSON格式 function GetRowData(row){ var rowData = {}; for(var j=0;j<row.cells.length; j++){ name = row.parentNode.rows[0].cells[j].getAttribute("Name"); if(name){ var value = row.cells[j].getAttribute("Value"); if(!value){ value = row.cells[j].innerHTML; } rowData[name] = value; } } //alert("ProductName:" + rowData.ProductName); //或者这样:alert("ProductName:" + rowData["ProductName"]); return rowData; } //检查当前数据行中需要运行的字段 function CheckExpression(row){ for(var j=0;j<row.cells.length; j++){ expn = row.parentNode.rows[0].cells[j].getAttribute("Expression"); //如指定了公式则要求计算 if(expn){ var result = Expression(row,expn); var format = row.parentNode.rows[0].cells[j].getAttribute("Format"); if(format){ //如指定了格式,进行字值格式化 row.cells[j].innerHTML = formatNumber(Expression(row,expn), format); }else{ row.cells[j].innerHTML = Expression(row,expn); } } } } //计算需要运算的字段 function Expression(row, expn){ var rowData = GetRowData(row); //循环代值计算 for(var j=0;j<row.cells.length; j++){ name = row.parentNode.rows[0].cells[j].getAttribute("Name"); if(name){ var reg = new RegExp(name, "i"); expn = expn.replace(reg, rowData[name].replace(/\,/g, "")); } } return eval(expn); } /////////////////////////////////////////////////////////////////////////////////// /** * 格式化数字显示方式 * 用法 * formatNumber(12345.999,'#,##0.00'); * formatNumber(12345.999,'#,##0.##'); * formatNumber(123,'000000'); * @param num * @param pattern */ /* 以下是范例 formatNumber('','')=0 formatNumber(123456789012.129,null)=123456789012 formatNumber(null,null)=0 formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12 formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12 formatNumber(123456789012.129,'#0.00')=123,456,789,012.12 formatNumber(123456789012.129,'#0.##')=123,456,789,012.12 formatNumber(12.129,'0.00')=12.12 formatNumber(12.129,'0.##')=12.12 formatNumber(12,'00000')=00012 formatNumber(12,'#.##')=12 formatNumber(12,'#.00')=12.00 formatNumber(0,'#.##')=0 */ function formatNumber(num,pattern){ var strarr = num?num.toString().split('.'):['0']; var fmtarr = pattern?pattern.split('.'):['']; var retstr=''; // 整数部分 var str = strarr[0]; var fmt = fmtarr[0]; var i = str.length-1; var comma = false; for(var f=fmt.length-1;f>=0;f--){ switch(fmt.substr(f,1)){ case '#': if(i>=0 ) retstr = str.substr(i--,1) + retstr; break; case '0': if(i>=0) retstr = str.substr(i--,1) + retstr; else retstr = '0' + retstr; break; case ',': comma = true; retstr=','+retstr; break; } } if(i>=0){ if(comma){ var l = str.length; for(;i>=0;i--){ retstr = str.substr(i,1) + retstr; if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr; } } else retstr = str.substr(0,i+1) + retstr; } retstr = retstr+'.'; // 处理小数部分 str=strarr.length>1?strarr[1]:''; fmt=fmtarr.length>1?fmtarr[1]:''; i=0; for(var f=0;f<fmt.length;f++){ switch(fmt.substr(f,1)){ case '#': if(i<str.length) retstr+=str.substr(i++,1); break; case '0': if(i<str.length) retstr+= str.substr(i++,1); else retstr+='0'; break; } } return retstr.replace(/^,+/,'').replace(/\.$/,''); }
发表评论
-
Ajax Session Timeout处理
2014-07-01 09:57 9416对于session过期跳转的问题,很简单,就是一个过滤器,然 ... -
全局JavaScript禁用超链接对象
2013-05-15 23:44 0一般情况下,我们在设置禁用超链接的时候都是这样做的: &l ... -
判断IE浏览器是否支持JSON.parse
2013-05-10 17:43 0以下代码首先探测是否在 window 下存在 JSON 对象, ... -
让IE旧版本浏览器也支持HTML5的特性
2013-04-24 21:39 3217让IE旧版本浏览器也支持HTML5的特性,可以通过IE支持 ... -
JS中showModalDialog (模态窗口)详细使用
2013-04-22 13:12 37994基本介绍: ... -
js判断是否为360浏览器
2013-03-09 14:49 2323自从3Q大战之后360浏览器的userAgen ... -
js中用正则表达式 过滤特殊字符 ,校验所有输入域是否含有特殊符号
2012-10-30 16:54 0https://cloud-nkgy1.huawei.com/ ... -
IFrame页面内target目标跳转到另一个iframe
2012-09-05 02:08 14748IFrame页面内target目标跳转到另一个iframe ... -
很不错的表格特效
2012-08-17 03:47 1361<html> <head> & ... -
类似QQ对话框上下部分可拖动的代码
2012-08-13 01:17 1177一款JS特效:类似QQ对话 ... -
jQuery实现对Table内容的模糊查询
2012-08-12 01:58 2809jQuery实现对表格内容的模糊查询 <!DOCTYPE ... -
Struts2 json ajax动态显示列表
2012-08-08 00:51 3292关于在Struts2中结合json使用ajax进行动态无 ... -
利用HTML5实现3D动态图表
2012-08-02 18:45 4034事先引入: <script type="tex ... -
window.location.href数据更新
2012-04-24 15:58 2235<script type="text/java ... -
Ajax无刷新数据更新
2012-04-24 15:42 1303<script type="text/ ...
相关推荐
先简单说明一下,这个Demo引入...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a
在实现可编辑表格时,我们需要在用户点击单元格时将`<td>`元素替换为`<input>`或`<textarea>`,并在用户完成编辑后将数据保存回`<td>`。这可能涉及到`innerHTML`属性、`createElement`、`appendChild`等方法。 4. *...
综上所述,"纯js和html可编辑的table(表格)"项目结合了HTML的结构、JavaScript的交互性以及CSS的美化,实现了用户可以直接在网页上编辑表格的功能。这不仅可以提高用户体验,也简化了数据输入和管理的流程。通过...
这个JavaScript文件包含了实现可编辑表格的核心逻辑,包括: - 初始化表格的编辑功能。 - 绑定事件处理器,处理单元格的点击和离开事件。 - 更新数据的方法,确保数据的正确保存和显示。 ### 6. HTML结构与引用资源...
本教程主要探讨如何利用jQuery、PHP和jeditable插件实现在网页上实时编辑表格内容的功能,包括下拉菜单、日历等丰富的表单元素。以下是详细的知识点解析: 1. **jQuery**:jQuery是一个强大的JavaScript库,简化了...
这里我们将深入探讨如何利用这些技术实现实时编辑表格字段内容。 首先,`jQuery`是一个轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在这个项目中,jQuery用于处理用户与表格...
不过,仅凭原生JavaScript实现的可编辑表格功能可能较为有限,例如无法实现复杂的排序、过滤或分页。这时,可以考虑引入一些成熟的JavaScript表格库,比如 handsontable、ag-Grid 或者 Tabulator。这些库提供了丰富...
在本文中,我们将深入探讨如何使用jQuery、PHP和jeditable插件来实现实时编辑表格字段内容的功能。这种技术在现代Web应用中非常常见,它提供了用户友好的交互体验,使得数据更新更加高效。 首先,jQuery是一个强大...
总结一下,jQuery实现可编辑表格主要涉及以下步骤: 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式,使输入框融入表格。 3. 使用jQuery监听事件,实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
在这个"可编辑表格js代码"中,`demo.html`很可能是展示这个功能的实例页面,它可能包含了一个预定义的表格,并应用了相关的JavaScript代码,使得用户可以直接在浏览器中编辑表格内容。而`js`文件则包含了实现这一...
在本文中,我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个商品库存管理的SKU(Stock Keeping Unit)表格。Vue.js是一个轻量级、高性能的前端开发框架,而Element UI则是一套为开发者、设计师和产品经理...
3. 可编辑表格的设计与实现,包括监听用户交互、切换编辑状态和实时保存数据。 4. 代码注释和文档编写,以提高代码的可读性和可维护性。 通过学习和理解这个实现,开发者可以增强其在动态网页开发中的技能,尤其是...
这个资源,"在线编辑表格 html格式可编辑表格 javascript编写",提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言,常用于增强网页的动态功能,而HTML则是网页内容的基础...
这里我们探讨的主题是如何使用JavaScript(以及可能的库如jQuery或更专业化的数据网格库)来实现一个可编辑的表格功能。从提供的信息来看,你可能已经下载了一个名为"GridEdit.js"的文件和一个示例HTML页面"test....
这些特性为我们提供了构建可编辑表格的基础。 1. **选择器**:在jQuery中,我们可以使用CSS选择器快速定位到表格元素,如`$('table tr td')`会选取表格中的所有单元格。通过选择器,我们可以针对特定行、列或单元格...
在本案例中,"用js制作的可编辑表格"是一个使用JavaScript实现的用户可以直接在网页上编辑表格内容的功能。这种功能在数据管理、信息展示和表单填写等场景下非常实用,因为它提供了直观且便捷的数据输入方式。 首先...
总结,使用纯JavaScript实现可编辑表格涉及以下几个关键知识点: 1. HTML表格结构和元素 2. JavaScript事件监听(click、blur等) 3. 动态DOM操作(创建、移除、修改元素) 4. 本地存储(localStorage)进行数据持久...
通过解压文件,你可以看到HTML文件展示了可编辑表格的界面,CSS文件负责样式,而JavaScript文件则包含了实现交互逻辑的代码。通过对这些文件的学习和研究,你可以理解并掌握在Bootstrap中创建可编辑表格的完整流程。
这种方法通过调整表格单元格的显示样式来实现可编辑状态,通常会隐藏原有的显示数据标签,显示一个编辑框,并通过样式来调整编辑框的布局。 使用这种方法时,可能会用到Element UI的`<el-table-column>`组件的`...