js+Html實現(xiàn)表格可編輯操作
更新時間：2021年04月22日 16:44:06 作者：qqliang1314
這篇文章主要為大家詳細介紹了js+Html實現(xiàn)表格可編輯操作，能動態(tài)添加刪除行，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js+Html實現(xiàn)表格可編輯操作的具體代碼，供大家參考，具體內(nèi)容如下
功能描述：單擊頁面使單元格td變成可編輯狀態(tài)，輸入內(nèi)容后，當單元格失去焦點時，保存輸入的內(nèi)容。
點擊增加行，在table的末尾增加一行；點擊刪除行，刪除table中最末尾的一行。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>編輯表格數(shù)據(jù)</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>
<script>
/**
* JS實現(xiàn)可編輯的表格
* 用法: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<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;
}
}
//為單元格創(chuàng)建可編輯輸入框
function CreateTextBox(element, value){
//檢查編輯狀態(tài)，如果已經(jīng)是編輯狀態(tài)，跳過
var editState = element.getAttribute("EditState");
if(editState != "true"){
//創(chuàng)建文本框
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();
//改變狀態(tài)變量
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);
}
}
//為單元格創(chuàng)建選擇框
function CreateDropDownList(element, value){
//檢查編輯狀態(tài)，如果已經(jīng)是編輯狀態(tài)，跳過
var editState = element.getAttribute("EditState");
if(editState != "true"){
//創(chuàng)建下接框
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;
//設置創(chuàng)建下接框的失去焦點事件
downList.onblur = function (){
CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);
}
//向當前單元格添加創(chuàng)建下接框
ClearChild(element);
element.appendChild(downList);
downList.focus();
//記錄狀態(tài)的改變
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
}
}
//取消單元格編輯狀態(tài)
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);
}
//清空指定對象的所有字節(jié)點
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){
//執(zhí)行刪除
table.deleteRow(i);
}
}
}
}
}
//提取表格的值,JSON格式
function GetTableData(table){
var tableData = new Array();
alert("行數(shù)：" + table.rows.length);
for(var i=1; i<table.rows.length;i++){
tableData.push(GetRowData(tabProduct.rows[i]));
}
return tableData;
}
//提取指定行的數(shù)據(jù)，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;
}
//檢查當前數(shù)據(jù)行中需要運行的字段
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);
//循環(huán)代值計算
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);
}
///
/**
* 格式化數(shù)字顯示方式
* 用法
* 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='';
// 整數(shù)部分
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+'.';
// 處理小數(shù)部分
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(/\.$/,'');
}
</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 width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">數(shù)量</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>
效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue.js實現(xiàn)可編輯的表格
- angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
- vuejs+element UI點擊編輯表格某一行時獲取內(nèi)容填入表單的示例
- 使用JavaScript實現(xiàn)表格編輯器(實例講解)
- jQuery實現(xiàn)可編輯表格并生成json結(jié)果(實例代碼)
- JS表格組件BootstrapTable行內(nèi)編輯解決方案x-editable
- JavaScript簡單表格編輯功能實現(xiàn)方法
- javascript實現(xiàn)表格排序 編輯 拖拽 縮放
- 百度編輯器從Json對象中取值，完成初次渲染，在編輯器內(nèi)畫表格
- editable.js 基于jquery的表格的編輯插件
相關(guān)文章
這篇文章主要介紹了JavaScript基于面向?qū)ο笾^承，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JavaScript設計模式組合設計模式案例，組合設計模式是用于將多個部分通過組合的方式行成一個整體，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-06-06
如何通過vscode運行調(diào)試javascript代碼
這篇文章主要介紹了如何通過vscode運行調(diào)試javascript代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
js實現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果完整實例
這篇文章主要介紹了js實現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果的方法,以完整實例形式分析了javascript操作圖片切換的技巧,需要的朋友可以參考下2015-03-03
egg.js的基本使用和調(diào)用數(shù)據(jù)庫的方法示例
這篇文章主要介紹了egg.js的基本使用和調(diào)用數(shù)據(jù)庫的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Bootstrap每天必學之工具提示（Tooltip）插件，工具提示就是通過鼠標移動選定在特定的元素上時，顯示相關(guān)的提示語，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了JavaScript如何向頁面中添加一個按鈕,使用兩種方式向頁面中添加一個按鈕,分別是appendChild()和innerHTML屬性,本文結(jié)合示例代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
滾動條緩慢滾動到頂部這樣的效果想必大家在瀏覽網(wǎng)頁的時候都有見過吧，本文使用js實現(xiàn)下，感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
本篇文章主要介紹了使用webpack-dev-server處理跨域請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
原生JavaScript獲取樣式，是獲取樣式，不是設置樣式。若沒有給元素設置樣式值，則返回瀏覽器給予的默認值2014-10-10