span可编辑 属性 html 可编辑td
<span contenteditable="true">11111111111111111</span>
<!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>
<script src="JavaScript.js"></script>
<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">
var tabProduct = document.getElementById("tabProduct");//获取table对象 // 设置表格可编辑
// 可一次设置多个,例如:EditTables(tb1,tb2,tb2,......)
EditTables(tabProduct);//调用方法 传递这个table对象 </script>
</body>
</html>
js
/**
* JS实现可编辑的表格
* 用法:EditTables(tb1,tb2,tb2,......);
* Create by Senty at 2008-04-12
**/ //设置多个表格可编辑
function EditTables() {
for (var i = 0; i < arguments.length; i++) { //arguments叫做类数组对象
SetTableCanEdit(arguments[i]); //设置表可以编辑
}
} //设置表格单击事件
function SetTableCanEdit(table) {
for (var i = 1; i < table.rows.length; i++) { //循环传递过来的对象的行 第0行不传递
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 = null 表示单元格没有指定
//如果当前单元格没有指定,则查看当前列是否指定
editType = row.parentNode.rows[0].cells[j].getAttribute("EditType"); //传递过来的行的父元素下的行集合的第一行的指定属性名的属性值
}
if (editType) { //单元格指定的有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); //调用创建文本框函数,传递td和td中的内容
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");//获取td指定属性名的Value属性值
}
textBox.value = value;//编辑框 内容赋值 //设置文本框的失去焦点事件
textBox.onblur = function () {
CancelEditCell(this.parentNode, this.value); //取消编辑 单元格事件 //传递td 和编辑框的内容
}
//向当前单元格添加文本框
ClearChild(element); //清空td中的内容
element.appendChild(textBox);//td追加这个元素
textBox.focus(); //获得焦点
textBox.select(); //内容全选 //改变状态变量
element.setAttribute("EditState", "true"); //设置指定属性名和属性值
element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);//设置这个td父元素的父元素的currentrow属性为这个元素的父元素的所在行
} } //为单元格创建选择框
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");//td所在列的属性值
} 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");//获取td的值
}
downList.value = value; //设置创建下接框的失去焦点事件
downList.onblur = function () {
CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text); //取消编辑单元格
} //向当前单元格添加创建下接框
ClearChild(element); //清空td下内容
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); //设置td的Value属性为编辑框内容
if (text) {
element.innerHTML = text;
} else {
element.innerHTML = value; //td插入这个传递过来的编辑框内容
}
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]));
}
console.log(tableData);
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(/\.$/, '');
}
设置文字不可选中后的css 样式
webkit-user-select: none;
user-select: none;
span可编辑 属性 html 可编辑td的更多相关文章
- easyui如何动态改变列的编辑属性
动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'t ...
- C# 如何定义让PropertyGrid控件显示[...]按钮,并且点击后以下拉框形式显示自定义控件编辑属性值
关于PropertyGrid控件的详细用法请参考文献: 1.C# PropertyGrid控件应用心得 2.C#自定义PropertyGrid属性 首先定义一个要在下拉框显示的控件: using Sy ...
- mapgis处理编辑属性结构时 死机问题
上午用的好好的mapgis6.7,下午就出错了,一编辑属性结构就出错,到网上查到了解决方法,和大家共享一下. 转自:http://bbs.3s001.com/forum.php?mod=viewthr ...
- ArcGIS学习记录—属性表的编辑与修改
原文地址: ArcGIS问题:属性表的编辑与修改 - Silent Dawn的日志 - 网易博客 http://gisman.blog.163.com/blog/static/344933882009 ...
- HTML5之contenteditable可编辑属性
运用contenteditable实现输入框高度自动增加,输入框标题name相对高度自动居中,代码如下: <!DOCTYPE html> <html> <head> ...
- PyQt(Python+Qt)学习随笔:QAbstractItemView的editTriggers属性以及平台编辑键(platform edit key )
老猿Python博文目录 老猿Python博客地址 editTriggers属性 editTriggers属性用于确认哪些用户操作行为会触发ItemView中的数据项进入编辑模式. 此属性是由枚举类E ...
- html中的span有value属性么(可以作为自定义属性在jquery中用)
html中的span有value属性么(可以作为自定义属性在jquery中用) 一.总结 可以作为自定义属性在jquery中用 二.html中的span有value属性么 value并不是span标签 ...
- vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法
在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...
- Delphi Treeview 用法(概念、属性、添加编辑插入节点、定位节点、拖拽等)
今天再细研究了一下Treeview的用法,网上虽然总结了很多,但是还是有很多节点没有讲到了,也给使用中遇到很多问题.特地总结一下: 1.概念 Treeview用于显示按照树形结构进行组织的数据.Tre ...
随机推荐
- [bzoj1860 ZJOI2006] 超级麻将 (线性dp)
传送门 Description Input 第一行一个整数N(N<=100),表示玩了N次超级麻将. 接下来N行,每行100个数a1..a100,描述每次玩牌手中各种牌的数量.ai表示数字为i的 ...
- linux文件的特殊权限及隐藏权限
基础知识 相信大家应该都知道linux的文件基本权限,使用ls -l命令可以显示文件的基本权限,"-rwxrwxrwx.",第一位表示文件的属性(是文件- ,目录d等),后面每隔 ...
- 关于 多个git用户或多个git管理工具切换时出现的问题总结
在这几天遇到了个比较头痛的问题 因为在同时使用多个git工具(gitlab,github.gitee)由于账户的问题和这个仓库指定地址,导致拉代码和推代码不能正常运行 问题解决: 对于多个git直接的 ...
- PHP AES cbc模式 pkcs7 128加密解密
今天在对接一个第三方接口的时候,对方需要AES CBC模式下的加密.这里简单写一个demo class Model_Junjingbao extends Model { private static ...
- form提交表单中包含time类型数据
当数据库和实体类中含有date类型的数据时 ,form提交的时间数据只是string类型的,所以不能直接写入到java实体类和数据库,经过百度找到了解决方法 ,特地挪过来: 在controller中增 ...
- 【例题 4-4 uva 213】Message Decoding
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 输入的二进制长度最长为7 所以得开个sta[7][2^7]的样子才存的下所有的字符的.. 定义这么一个数组当字典. 然后一个字符一个 ...
- [bzoj3062][Usaco13Feb]Taxi_贪心
Taxi bzoj-3062 Usaco13Feb 题目大意:有n个奶牛想坐出租车.第i头奶牛在起点a[i]等候,想坐出租车到b[i].Bessie从0出车,车上只能坐一头奶牛.她必须完成所有奶牛的要 ...
- Spring Boot上传文件
我们使用Spring Boot最新版本1.5.9.jdk使用1.8.tomcat8.0. <parent> <groupId>org.springframework.boot& ...
- hdu5355 思维+爆搜
pid=5355">http://acm.hdu.edu.cn/showproblem.php?pid=5355 Problem Description There are m sod ...
- swing Jlable中存放变量显示问题
java swing 学习 在做一个ATM机系统小案例中.碰到JLable中存放变量,变量发生改变.而JLable中还是显示原来的值,网上寻找答案,用updateUI()和revalidate();方 ...