js+Html实现表格可编辑操作本⽂实例为⼤家分享了js+Html实现表格可编辑操作的具体代码，供⼤家参考，具体内容如下
功能描述：单击页⾯使单元格td变成可编辑状态，输⼊内容后，当单元格失去焦点时，保存输⼊的内容。
点击增加⾏，在table的末尾增加⼀⾏；点击删除⾏，删除table中最末尾的⼀⾏。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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;
js正则表达式判断数字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>
<script>
/**
* JS实现可编辑的表格
* ⽤法:EditTables(tb1,tb2,tb2,......);
**/
//设置多个表格可编辑
function EditTables(){
for(var i=0;i<arguments.length;i++){
SetTableCanEdit(arguments[i]);
}
}
//设置表格是可编辑的
function SetTableCanEdit(table){
for(var i=1; i&ws.length;i++){
ws[i]);
}
}
function SetRowCanEdit(row){
for(var j=0;j&lls.length; j++){
//如果当前单元格指定了编辑类型，则表⽰允许编辑
var editType = lls[j].getAttribute("EditType");
if(!editType){
//如果当前单元格没有指定，则查看当前列是否指定
editType = ws[0].cells[j].getAttribute("EditType");
}
if(editType){
EditCell(this);
}
}
}
}
//设置指定单元格可编辑
function EditCell(element, editType){
var editType = Attribute("EditType");
if(!editType){
//如果当前单元格没有指定，则查看当前列是否指定
editType = element.ws[0].llIndex].getAttribute("EditType");
}
switch(editType){
case "TextBox":
CreateTextBox(element, element.innerHTML);
break;
case "DropDownList":
CreateDropDownList(element);
break;
default:
break;
}
}
//为单元格创建可编辑输⼊框
function CreateTextBox(element, value){
//检查编辑状态，如果已经是编辑状态，跳过
var editState = Attribute("EditState");
if(editState != "true"){
//创建⽂本框
var textBox = ateElement("INPUT");
textBox.className="EditCell_TextBox";
//设置⽂本框当前值
if(!value){
value = Attribute("Value");
}
textBox.value = value;
//设置⽂本框的失去焦点事件
CancelEditCell(this.parentNode, this.value);
}
/
/向当前单元格添加⽂本框
ClearChild(element);
element.appendChild(textBox);
textBox.focus();
textBox.select();
//改变状态变量
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("CurrentRow", wIndex);
}
}
//为单元格创建选择框
function CreateDropDownList(element, value){
//检查编辑状态，如果已经是编辑状态，跳过
var editState = Attribute("EditState");
if(editState != "true"){
//创建下接框
var downList = ateElement("Select");
downList.className="EditCell_DropDownList";
//添加列表项
var items = Attribute("DataItems");
if(!items){
items = element.ws[0].llIndex].getAttribute("DataItems"); }
if(items){
items = eval("[" + items + "]");
for(var i=0; i<items.length; i++){
var oOption = ateElement("OPTION");
< = items[i].text;
oOption.value = items[i].value;
downList.options.add(oOption);
}
}
//设置列表当前值
if(!value){
value = Attribute("Value");
}
downList.value = value;
//设置创建下接框的失去焦点事件
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", wIndex);
}
}
//取消单元格编辑状态
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 = ws.length-1];
var newRow = lastRow.cloneNode(true);
//计算新增加⾏的序号，需要引⼊jquery 的jar包
var startIndex = $.inArray(ws);
var endIndex = ws;
table.tBodies[0].appendChild(newRow);
SetRowCanEdit(newRow);
return newRow;
}
/
/删除⾏
function DeleteRow(table, index){
for(var ws.length - 1; i>0;i--){
var chkOrder = ws[i].cells[0].firstChild;
if(chkOrder){
pe = "CHECKBOX"){
if(chkOrder.checked){
//执⾏删除
table.deleteRow(i);
}
}
}
}
}
//提取表格的值,JSON格式
function GetTableData(table){
var tableData = new Array();
alert("⾏数：" + ws.length);
for(var i=1; i&ws.length;i++){
tableData.push(ws[i]));
}
return tableData;
}
//提取指定⾏的数据，JSON格式
function GetRowData(row){
var rowData = {};
for(var j=0;j&lls.length; j++){
name = ws[0].cells[j].getAttribute("Name");
if(name){
var value = lls[j].getAttribute("Value");
if(!value){
value = lls[j].innerHTML;
}
rowData[name] = value;
}
}
//alert("ProductName:" + rowData.ProductName);
//或者这样：alert("ProductName:" + rowData["ProductName"]);
return rowData;
}
//检查当前数据⾏中需要运⾏的字段
function CheckExpression(row){
for(var j=0;j&lls.length; j++){
expn = ws[0].cells[j].getAttribute("Expression");
/
/如指定了公式则要求计算
if(expn){
var result = Expression(row,expn);
var format = ws[0].cells[j].getAttribute("Format");
if(format){
//如指定了格式，进⾏字值格式化
}
}
}
}
//计算需要运算的字段
function Expression(row, expn){
var rowData = GetRowData(row);
//循环代值计算
for(var j=0;j&lls.length; j++){
name = ws[0].cells[j].getAttribute("Name"); if(name){
var reg = new RegExp(name, "i");
expn = place(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 = String().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;
}
}
place(/^,+/,'').replace(/\.$/,'');
}
</script>
</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 wid
th="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="ElementById('tabProduct'),1)" />
<input type="button" name="Submit2" value="删除" onclick="ElementById('tabProduct'),1)" />
<input type="button" name="Submit22" value="重置" onclick="load()" />
<input type="submit" name="Submit3" value="提交" onclick="ElementById('tabProduct'));return false;" />
</form>
<script language="javascript" src="GridEdit.js"></script>
<script language="javascript">
var tabProduct = ElementById("tabProduct");
/
/ 设置表格可编辑
// 可⼀次设置多个，例如：EditTables(tb1,tb2,tb2,......)
EditTables(tabProduct);
</script>
</body>
</html>
效果如下：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论