js localStorage editable table 示例

最新推荐文章于 2023-07-23 22:20:50 发布

一粒马豆

最新推荐文章于 2023-07-23 22:20:50 发布

阅读量239

点赞数

分类专栏： JavaScript 文章标签： js localStorage editable table 可编辑表格本地存储

本文链接：https://blog.csdn.net/MAILLIBIN/article/details/90115266

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
 
	<style type="text/css">
		body{
			background-color:#eeeeee;
		}
		table{
			border:2px solid red;
			border-collapse: collapse;
		}
		th{
			background-color: #008080;
			color:white;
		}
		
		td{
			width:auto;
			min-width: 20em;
			background-color: white;
			border:1px solid red;
 
		}
		input{
			border: none;
			width: 100%;
		}
	</style>
 
	<script type="text/javascript">
		//创建一个命名的本地存储 原有本地数据会被清除
		function createLocalStorage(storageName){
			if(!localStorage){
				console.log("localStorage is not supported!");
				return;
			}
			localStorage[storageName]="[]";
			console.log("localStorage "+storageName+" is created!");
 
		}
 
 
		//保存数据到本地
		//注意data的格式是二维数组
		function saveDataToLocal(data,storageName){
			if(!localStorage){
				console.log("localStorage is not supported!");
				return;
			}
			console.log("data to be saved: "+data);
			//先从本地取出原有数据
			var oldData=JSON.parse(localStorage[storageName]);
			console.log("oldData length: "+oldData.length);
			//新数据合并一起
			for(i=0;i<data.length;i++){
				oldData.push(data[i]);
			}
			//合并后的数据再存入本地
			localStorage[storageName]=JSON.stringify(oldData);
			console.log("saved data: "+localStorage[storageName]);
 
		}
 
		//将数据显示为可编辑的table
		function showEditTable(tableData,tableContainerId){
			tableData=tableData;
			mytable=document.createElement("table");
			for(i=0;i<tableData.length;i++){
				tableRow=document.createElement("tr");
				mytable.appendChild(tableRow);
				for(j=0;j<tableData[i].length;j++){
					tableCell=document.createElement("td");
					textInput=document.createElement("input");
					textInput.type="text";
					textInput.value=tableData[i][j];
					textInput.id="cell_"+i+"_"+j;
					textInput.i=i
					textInput.j=j;
					tableCell.appendChild(textInput);
					tableRow.appendChild(tableCell);
					textInput.onchange=function(event){
						var eventElement=event.target;
						tableData[eventElement.i][eventElement.j]=eventElement.value;						
					}
					textInput.onkeypress=function(event){
						if(event.keyCode==13){
							var eventElement=event.target;
							if(eventElement.i<tableData.length-1){
								var targetCellId="cell_"+(parseInt(eventElement.i)+1)+"_"+eventElement.j;
								document.getElementById(targetCellId).focus();
							}else if(eventElement.i==(tableData.length-1)){
								tableData[eventElement.i][eventElement.j]=eventElement.value;
								var tableColumnCount=tableData[0].length;
								var item=[];
								for(ci=0;ci<tableColumnCount;ci++){
									item.push("");
								}
								tableData.push(item);
								showEditTable(tableData,tableContainerId);
								var targetCellId="cell_"+(parseInt(eventElement.i)+1)+"_"+eventElement.j;
								document.getElementById(targetCellId).focus();
							}
 
						}
					}	
					
				}
				
			}
			document.getElementById(tableContainerId).innerHTML="";
			document.getElementById(tableContainerId).appendChild(mytable);
		}
 
 
		//页面按钮事件
		function getLocalStorageData(){
			data=JSON.parse(localStorage["bbb"]);
			showEditTable(data,"tableContainer");
			tableData=data;
		}
 
		function setLocalStorageData(){
			data=tableData;
			saveDataToLocal(data,"bbb");
		}	
 
	</script>
</head>
<body>
 
<button title="注意！旧的数据会被清空！" onclick="createLocalStorage('bbb')">新建本地存储</button>
<button onclick="setLocalStorageData()">保存到本地</button>
<button onclick="getLocalStorageData()">从本地导入</button>
 
 
<div id="tableContainer"></div>
 
<script type="text/javascript">
	//数据格式为多维数组
	tableData=[["","",""]];
 
	showEditTable(tableData,"tableContainer");	
 
	console.log("bbb:"+JSON.parse(localStorage["bbb"]));
 
</script>
 
</body>
</html>

一粒马豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js localStorage editable table 示例

<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> body{ background-color:#eeeeee; } table{ bo...
复制链接

扫一扫