`

HTML+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(/\.$/,'');  
}
分享到:
评论

相关推荐

    vue+iview 实现可编辑表格的示例代码

    先简单说明一下,这个Demo引入...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a

    js+html实现的Table可编辑

    在实现可编辑表格时,我们需要在用户点击单元格时将`&lt;td&gt;`元素替换为`&lt;input&gt;`或`&lt;textarea&gt;`,并在用户完成编辑后将数据保存回`&lt;td&gt;`。这可能涉及到`innerHTML`属性、`createElement`、`appendChild`等方法。 4. *...

    纯js和html可编辑的table(表格)

    综上所述,"纯js和html可编辑的table(表格)"项目结合了HTML的结构、JavaScript的交互性以及CSS的美化,实现了用户可以直接在网页上编辑表格的功能。这不仅可以提高用户体验,也简化了数据输入和管理的流程。通过...

    jQuery+PureCSS可编辑表格插件

    这个JavaScript文件包含了实现可编辑表格的核心逻辑,包括: - 初始化表格的编辑功能。 - 绑定事件处理器,处理单元格的点击和离开事件。 - 更新数据的方法,确保数据的正确保存和显示。 ### 6. HTML结构与引用资源...

    可编辑的表格:jQuery+PHP+jeditable实现实时编辑表格字段内容,下拉、日历等多种表单演示

    本教程主要探讨如何利用jQuery、PHP和jeditable插件实现在网页上实时编辑表格内容的功能,包括下拉菜单、日历等丰富的表单元素。以下是详细的知识点解析: 1. **jQuery**:jQuery是一个强大的JavaScript库,简化了...

    可编辑的表格:jQuery+PHP实现实时编辑表格字段内容

    这里我们将深入探讨如何利用这些技术实现实时编辑表格字段内容。 首先,`jQuery`是一个轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在这个项目中,jQuery用于处理用户与表格...

    JS实现可编辑的表格

    不过,仅凭原生JavaScript实现的可编辑表格功能可能较为有限,例如无法实现复杂的排序、过滤或分页。这时,可以考虑引入一些成熟的JavaScript表格库,比如 handsontable、ag-Grid 或者 Tabulator。这些库提供了丰富...

    可编辑的表格:jQuery+PHP+jeditable实现实时编辑表格字段内容

    在本文中,我们将深入探讨如何使用jQuery、PHP和jeditable插件来实现实时编辑表格字段内容的功能。这种技术在现代Web应用中非常常见,它提供了用户友好的交互体验,使得数据更新更加高效。 首先,jQuery是一个强大...

    jQuery实现可编辑表格

    总结一下,jQuery实现可编辑表格主要涉及以下步骤: 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式,使输入框融入表格。 3. 使用jQuery监听事件,实现表格单元格的编辑和保存功能。 这个简单的示例展示了...

    可编辑表格js代码

    在这个"可编辑表格js代码"中,`demo.html`很可能是展示这个功能的实例页面,它可能包含了一个预定义的表格,并应用了相关的JavaScript代码,使得用户可以直接在浏览器中编辑表格内容。而`js`文件则包含了实现这一...

    vue+element实现sku表格

    在本文中,我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个商品库存管理的SKU(Stock Keeping Unit)表格。Vue.js是一个轻量级、高性能的前端开发框架,而Element UI则是一套为开发者、设计师和产品经理...

    js实现可以编辑的表格

    3. 可编辑表格的设计与实现,包括监听用户交互、切换编辑状态和实时保存数据。 4. 代码注释和文档编写,以提高代码的可读性和可维护性。 通过学习和理解这个实现,开发者可以增强其在动态网页开发中的技能,尤其是...

    在线编辑表格 html格式可编辑表格 javascript编写

    这个资源,"在线编辑表格 html格式可编辑表格 javascript编写",提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言,常用于增强网页的动态功能,而HTML则是网页内容的基础...

    js做的可编辑的表格

    这里我们探讨的主题是如何使用JavaScript(以及可能的库如jQuery或更专业化的数据网格库)来实现一个可编辑的表格功能。从提供的信息来看,你可能已经下载了一个名为"GridEdit.js"的文件和一个示例HTML页面"test....

    JQuery实现可编辑的表格

    这些特性为我们提供了构建可编辑表格的基础。 1. **选择器**:在jQuery中,我们可以使用CSS选择器快速定位到表格元素,如`$('table tr td')`会选取表格中的所有单元格。通过选择器,我们可以针对特定行、列或单元格...

    用js制作的可编辑表格

    在本案例中,"用js制作的可编辑表格"是一个使用JavaScript实现的用户可以直接在网页上编辑表格内容的功能。这种功能在数据管理、信息展示和表单填写等场景下非常实用,因为它提供了直观且便捷的数据输入方式。 首先...

    使用纯js实现 编辑的表格

    总结,使用纯JavaScript实现可编辑表格涉及以下几个关键知识点: 1. HTML表格结构和元素 2. JavaScript事件监听(click、blur等) 3. 动态DOM操作(创建、移除、修改元素) 4. 本地存储(localStorage)进行数据持久...

    bootstrap插件_table可编辑表格_demo

    通过解压文件,你可以看到HTML文件展示了可编辑表格的界面,CSS文件负责样式,而JavaScript文件则包含了实现交互逻辑的代码。通过对这些文件的学习和研究,你可以理解并掌握在Bootstrap中创建可编辑表格的完整流程。

    vue+element-ui实现表格编辑的三种实现方式

    这种方法通过调整表格单元格的显示样式来实现可编辑状态,通常会隐藏原有的显示数据标签,显示一个编辑框,并通过样式来调整编辑框的布局。 使用这种方法时,可能会用到Element UI的`&lt;el-table-column&gt;`组件的`...

Global site tag (gtag.js) - Google Analytics