使html表格可编辑状态,js+Html实现表格可编辑操作
本文实例为大家分享了js+Html实现表格可编辑操作的具体代码,供大家参考,具体内容如下
功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容。
点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。
编辑表格数据
/**
* JS实现可编辑的表格
* 用法:EditTables(tb1,tb2,tb2,......);
**/
//设置多个表格可编辑
function EditTables(){
for(var i=0;i
SetTableCanEdit(arguments[i]);
}
}
//设置表格是可编辑的
function SetTableCanEdit(table){
for(var i=1; i
SetRowCanEdit(table.rows[i]);
}
}
function SetRowCanEdit(row){
for(var j=0;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
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);
//计算新增加行的序号,需要引入jquery 的jar包
var startIndex = $.inArray(lastRow,table.rows);
var endIndex = table.rows;
table.tBodies[0].appendChild(newRow);
newRow.cells[0].innerHTML=endIndex-startIndex;
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
tableData.push(GetRowData(tabProduct.rows[i]));
}
return tableData;
}
//提取指定行的数据,JSON格式
function GetRowData(row){
var rowData = {};
for(var j=0;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
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
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
switch(fmt.substr(f,1)){
case '#':
if(i
break;
case '0':
if(i
else retstr+='0';
break;
}
}
return retstr.replace(/^,+/,'').replace(/\.$/,'');
}
可编辑的表格
序号 | 商品名称 | 数量 | 单价 | 合计 | |
1 | C | 0 | 0 | 0 | |
2 | D | 0 | 0 | 0 |
var tabProduct = document.getElementById("tabProduct");
// 设置表格可编辑
// 可一次设置多个,例如:EditTables(tb1,tb2,tb2,......)
EditTables(tabProduct);
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
使html表格可编辑状态,js+Html实现表格可编辑操作相关推荐
- html双击变成可编辑状态,JS实现双击编辑可修改状态的方法
本文实例讲述了JS实现双击编辑可修改状态的方法.分享给大家供大家参考.具体如下: 这是现在流行的一个表单特效,在网页上单击某文字,文字变为编辑状态,或者是让输入新文字,这就是JavaScript控制表 ...
- html表格鼠标高亮行列,JS实现的表格行鼠标点击高亮效果代码
本文实例讲述了JS实现的表格行鼠标点击高亮效果代码.分享给大家供大家参考,具体如下: 偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效) var high ...
- html表格按照编号排序,JS实现简单表格排序操作示例
本文实例讲述了JS实现简单表格排序操作.分享给大家供大家参考,具体如下: sort table *{ margin:0px; padding:0px; } body{ background:#ccc; ...
- 用html向表格插入新行,js向table表格中插入添加新行和选择删除行
js向table表格中插入添加新行和选择删除行-综合特效-网页特效-站长新动力-msxindl.com #tab{ width:50%; } #tab td{ height:2em; text-ali ...
- html中input不可编辑状态,css如何实现input不可编辑
css实现input不可编辑的方法:1.设置[οnfοcus=this.blur()]当鼠标放不上就离开焦点:2.设置disabled,代码为[<..name value="()&qu ...
- android设置EditText为不可编辑状态
最近做一个项目,需要动态设置EditText为不可编辑状态,根据某些条件判断,设置EditText为可编辑状态: eidtext.setFocusableInTouchMode(false);//不可 ...
- tableview 编辑状态下,UITableViewCellEditingStyleDelete | UITableViewCellEditingStyleInsert 多选的时候,替换圆圈图片
打开编辑模式,使得tableview处于选择状态 [_tableView setEditing:YES animated:NO] - (UITableViewCellEditingStyle)tabl ...
- bootstrapt 表格自适应_好用的自适应表格插件-bootstrap table (支持固定表头)
最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...
- js点击使内容变成可编辑状态
一个有内容的标签,用原生JS点击按钮使内容变成可编辑状态,然后使用保存数据.这个是点击编辑按钮使得标签内容替换为文本域来实现的. 代码如下 <!DOCTYPE html> <html ...
最新文章
- 面试官再问我如何保证 RocketMQ 不丢失消息,这回我笑了!
- muduo之Singleton
- vscode修改c 项目_windows 10上使用vscode编译运行和调试C/C++
- Python+OpenGL切分图形窗口在多视区中显示不同动画
- CCF201703-3 Markdown(100分)【文本处理】
- java成神之——集合框架之ArrayList,Lists,Sets
- mysql 创建表格time类型_第十九天MySQL数据库入门(mysql数据类型)
- django mysql 读写分离
- MATLAB数字图像处理模块在哪,MATLAB在数字图像处理中的应用
- 三菱 PLC ST语言 步进电机正反转
- Python获取地理数据 匹配中文城市所属省份
- 当出现Served at:.........时的错误
- 从实际项目出发,告诉你vue3到底香不香
- 教大家写特征码扫描工具来自动寻找CALL地址
- 电脑出问题解决办法(Win7)
- 南邮 OJ 1484 烧饼重叠问题
- Android SnackBar
- 2018 “百度之星”程序设计大赛 - 初赛(A)
- 广州车展直击:现代汽车携豪华阵容共建未来汽车生态圈
- 阿里巴巴收购 Yahoo! 中国之后的风险