欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

js localStorage editable table 示例

程序员文章站 2022-06-08 17:22:17
...

 

<!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: 25em;
			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");
				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);
					textInput.onkeypress=function(event){
						if(event.keyCode==13){
							eventElement=event.target;
							tableData[eventElement.i][eventElement.j]=eventElement.value;
							//console.log(tableData);
							if(eventElement.i<tableData.length-1){
								targetCellId="cell_"+(parseInt(eventElement.i)+1)+"_"+eventElement.j;
								document.getElementById(targetCellId).focus();
							}

						}
					}
					
					tableRow.appendChild(tableCell);
				}
				mytable.appendChild(tableRow);
			}
			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=[["一二三四五六七","ONE TWO THREE FOUR FIVE SIX SEVEN"],
				["甲乙丙丁戊己庚辛壬癸","JIA YI BING DING WU JI GEN XIN REN GUI"],
				["子丑寅卯辰巳午未申酉戌亥","ZI CHOU YIN MAO CHEN SI WU WEI SHEN YOU XU HAI"]];

	showEditTable(tableData,"tableContainer");	

	console.log("bbb:"+JSON.parse(localStorage["bbb"]));

</script>

</body>
</html>

 

相关标签： js localStorage editable table 可编辑表格 本地存储

上一篇： 浅谈Linux vfork与fork简单对比分析

下一篇： DevExpress 使用 GridControl 时，数据源无法立即更新的问题

推荐阅读