JS实现即点即编辑功能

最新推荐文章于 2023-09-30 09:43:19 发布
最新推荐文章于 2023-09-30 09:43:19 发布 · 435 阅读
文章标签：
#教育 #生活 #浏览器 #JavaScript #CSS #ViewUI
Javascript 专栏收录该内容
3 篇文章
订阅专栏
以前在网上都看到过类似的功能，不过没自己想要实现过，这次刚好做静态页面中有这样的一个需求，就试着自己做做看，做完发现也不是什么很难的事情。
效果如图所示：
代码分享
<html>
<head>
<title></title>
<script LANGUAGE="JavaScript">　
<!--
var globalLineId_1 = 1;
var endLineId_1 = 5;

var globalLineId_2 = 1;
var endLineId_2 = 5;

var globalLineId_3 = 1;
var endLineId_3 = 5;

var currTab = 1;
function switchShow(isWrite,lineId, tabId){
	var inputText = document.getElementById("inputText_"+tabId+"_"+lineId);
	var inputDiv = document.getElementById("inputDiv_"+tabId+"_"+lineId);
	var inputContentDiv = document.getElementById("inputContentDiv_"+tabId+"_"+lineId);
	var inputContent = document.getElementById("inputContent");
	var inputTd = document.getElementById("inputTd_"+tabId+"_"+lineId);

	eval("globalLineId_"+tabId+"=lineId");
	currTab = tabId;

	if (isWrite){
		inputText.value=inputDiv.innerText
		inputDiv.style.display="none";
		inputText.style.display="block";
		inputContent.innerText = inputContentDiv.innerText;
		inputText.focus();

		if (eval("globalLineId_"+tabId) == eval("endLineId_"+tabId)){
			addNewRow();
		}
	}else{
		inputDiv.innerText=inputText.value;
		inputDiv.style.display="block";
		inputText.style.display="none";
	}
}

function addNewRow(){
	eval("endLineId_"+currTab+"++");
	var currEndLineId = eval("endLineId_"+currTab);
	var inputTab = document.getElementById("inputTab_" + currTab);
	var newTr = inputTab.insertRow();
	var newTd = newTr.insertCell();
	newTd.id = "inputTd_"+currTab+"_"+currEndLineId;
	newTd.style.height = "22px";
	newTd.style.borderBottom = "solid 1px #000";
	newTd.innerHTML = "<div id='inputDiv_"+currTab+"_"+currEndLineId+"' style='padding-left:3px;'> </div>" +
	"<input id='inputText_"+currTab+"_"+currEndLineId+"' onblur='switchShow(false,"+currEndLineId+", "+currTab+");' type='text' class='inputmess' style='width:100%; display:none'>" +
	"<div id='inputContentDiv_"+currTab+"_"+currEndLineId+"' style='display:none'></div>";

	newTd.onclick = Function("switchShow(true, "+currEndLineId+", "+currTab+")");
}

function saveContent(){
	var inputContentDiv = document.getElementById("inputContentDiv_"+currTab+"_"+eval("globalLineId_"+currTab));
	var inputContent = document.getElementById("inputContent");
	if(inputContentDiv !=null){
		inputContentDiv.innerText = inputContent.innerText;
	}
}

function deleteItem(){
	var inputTd = document.getElementById("inputTd_"+currTab+"_"+eval("globalLineId_"+currTab));
	var inputTab = document.getElementById("inputTab_"+currTab);
	var inputRows = inputTab.rows;
	var inputCells ;
	var rowsLength = inputRows.length;
	if (inputTd!=null){
		for(i=1; i <rowsLength; i++){
			inputCells = inputRows[i].getElementsByTagName("td");
			if (inputCells[0].id=="inputTd_"+currTab+"_"+eval("globalLineId_"+currTab)){
				if (confirm("确认要删除吗？")){
					inputTab.deleteRow(inputRows[i].rowIndex);
					if (rowsLength-1<6){
						addNewRow();
					}
					return;
				}
			}
		}
	}else{
		alert("请选择再删除");
	}

}
//-->　
</script>
</head>

<body leftMargin="0" topMargin="1" marginwidth="0" marginheight="0"style="overflow: auto">
<table width="100%" cellSpacing="0" cellPadding="0" border="0">
	<tr height="30px">
		<td></td>
	</tr>
	<tr valign="top" height="300px;">
		<td width="50%" align="right">
		<table cellSpacing="0" cellPadding="0" width="88%" align="center">
			<tr>
				<td width="30%" align="center" valign="top">
				<div style="height: 130px; width: 100%; overflow-y: scroll; border: 1px solid #000;">
				<table id="inputTab_1" cellSpacing="0" cellPadding="0" width="100%" align="center" style="margin-top: 0px">
					<tr>
						<td	style="padding-left: 5px; text-align: left; background-color: #EAEBDB; height: 25px; border-bottom: solid 1px #000">配置预算项目
						</td>
					</tr>
					<tr>
						<td id="inputTd_1_1" height="22px;"	onclick="switchShow(true, 1, 1);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_1_1" style="padding-left: 3px;">教育学费</div>
						<input id="inputText_1_1" onblur="switchShow(false,1, 1);" type="text" class="inputmess" style="width: 100%; display: none" value="教育学费">
						<div id="inputContentDiv_1_1" style="display: none">大学学位已成为社会工作的基本门槛，也成为父母提供子女的基本，子女教育具有不具时间弹性和费用弹性，不象住房规划和退休规划，如财礼不足，可以减低标准，子女教育的时间点和费用比较固定，需要及早规划。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_1_2" height="22px;"	onclick="switchShow(true, 2, 1);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_1_2" style="padding-left: 3px;">住宿费</div>
						<input id="inputText_1_2" onblur="switchShow(false,2, 1);" type="text" class="inputmess" style="width: 100%; display: none" value="住宿费">
						<div id="inputContentDiv_1_2" style="display: none">住宿费项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_1_3" height="22px;" onclick="switchShow(true, 3, 1);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_1_3" style="padding-left: 3px;">生活费</div>
						<input id="inputText_1_3" onblur="switchShow(false,3, 1);" type="text" class="inputmess" style="width: 100%; display: none" value="生活费">
						<div id="inputContentDiv_1_3" style="display: none">生活费项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_1_4" height="22px;" onclick="switchShow(true, 4, 1);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_1_4" style="padding-left: 3px;">其他</div>
						<input id="inputText_1_4" onblur="switchShow(false,4, 1);" type="text" class="inputmess" style="width: 100%; display: none" value="其他">
						<div id="inputContentDiv_1_4" style="display: none">其他项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_1_5" height="22px;" onclick="switchShow(true, 5, 1);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_1_5" style="padding-left: 3px;"></div>
						<input id="inputText_1_5" onblur="switchShow(false,5, 1);" type="text" class="inputmess" style="width: 100%; display: none" value="">
						<div id="inputContentDiv_1_5" style="display: none"></div>
						</td>
					</tr>

				</table>
				</div>
				<div style="height: 130px; width: 100%; overflow-y: scroll; border: 1px solid #000; margin-top: 10px">
				<table id="inputTab_2" cellSpacing="0" cellPadding="0" width="100%" align="center" style="margin-top: 0px">
					<tr>
						<td style="padding-left: 5px; text-align: left; background-color: #EAEBDB; height: 25px; border-bottom: solid 1px #000">配置适用地区
						</td>
					</tr>
					<tr>
						<td id="inputTd_2_1" height="22px;" onclick="switchShow(true, 1, 2);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_2_1" style="padding-left: 3px;">西北地区</div>
						<input id="inputText_2_1" onblur="switchShow(false,1, 2);" type="text" class="inputmess" style="width: 100%; display: none" value="西北地区">
						<div id="inputContentDiv_2_1" style="display: none">配置适用地区，西北地区，项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_2_2" height="22px;" onclick="switchShow(true, 2, 2);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_2_2" style="padding-left: 3px;">福建省</div>
						<input id="inputText_2_2" onblur="switchShow(false,2, 2);" type="text" class="inputmess" style="width: 100%; display: none" value="福建省">
						<div id="inputContentDiv_2_2" style="display: none">配置适用地区，福建省，项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_2_3" height="22px;" onclick="switchShow(true, 3, 2);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_2_3" style="padding-left: 3px;">北京市</div>
						<input id="inputText_2_3" onblur="switchShow(false,3, 2);" type="text" class="inputmess" style="width: 100%; display: none" value="北京市">
						<div id="inputContentDiv_2_3" style="display: none">配置适用地区，北京市，项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_2_4" height="22px;" onclick="switchShow(true, 4, 2);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_2_4" style="padding-left: 3px;"></div>
						<input id="inputText_2_4" onblur="switchShow(false,4, 2);" type="text" class="inputmess" style="width: 100%; display: none" value="">
						<div id="inputContentDiv_2_4" style="display: none"></div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_2_5" height="22px;" onclick="switchShow(true, 5, 2);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_2_5" style="padding-left: 3px;"></div>
						<input id="inputText_2_5" onblur="switchShow(false,5, 2);" type="text" class="inputmess" style="width: 100%; display: none" value="">
						<div id="inputContentDiv_2_5" style="display: none"></div>
						</td>
					</tr>

				</table>
				</div>
				<div style="height: 130px; width: 100%; overflow-y: scroll; border: 1px solid #000; margin-top: 10px">
				<table id="inputTab_3" cellSpacing="0" cellPadding="0" width="100%" align="center" style="margin-top: 0px">
					<tr>
						<td style="padding-left: 5px; text-align: left; background-color: #EAEBDB; height: 25px; border-bottom: solid 1px #000">配置预算方案
						</td>
					</tr>
					<tr>
						<td id="inputTd_3_1" height="22px;" onclick="switchShow(true, 1, 3);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_3_1" style="padding-left: 3px;">低成本预算方案</div>
						<input id="inputText_3_1" onblur="switchShow(false,1, 3);" type="text" class="inputmess" style="width: 100%; display: none" value="低成本预算方案">
						<div id="inputContentDiv_3_1" style="display: none">配置预算方案，低成本预算方案，项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_3_2" height="22px;" onclick="switchShow(true, 2, 3);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_3_2" style="padding-left: 3px;">普通预算方案</div>
						<input id="inputText_3_2" onblur="switchShow(false, 2, 3);" type="text" class="inputmess" style="width: 100%; display: none" value="普通预算方案">
						<div id="inputContentDiv_3_2" style="display: none">配置预算方案，普通预算方案，项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_3_3" height="22px;" onclick="switchShow(true, 3, 3);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_3_3" style="padding-left: 3px;">豪华预算方案</div>
						<input id="inputText_3_3" onblur="switchShow(false,3, 3);" type="text" class="inputmess" style="width: 100%; display: none" value="豪华预算方案">
						<div id="inputContentDiv_3_3" style="display: none">配置预算方案，豪华预算方案，项目说明。</div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_3_4" height="22px;" onclick="switchShow(true, 4, 3);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_3_4" style="padding-left: 3px;"></div>
						<input id="inputText_3_4" onblur="switchShow(false,4, 3);" type="text" class="inputmess" style="width: 100%; display: none" value="">
						<div id="inputContentDiv_3_4" style="display: none"></div>
						</td>
					</tr>
					<tr>
						<td id="inputTd_3_5" height="22px;" onclick="switchShow(true, 5, 3);" style="border-bottom: solid 1px #000;">
						<div id="inputDiv_3_5" style="padding-left: 3px;"></div>
						<input id="inputText_3_5" onblur="switchShow(false, 5, 3);" type="text" class="inputmess" style="width: 100%; display: none" value="">
						<div id="inputContentDiv_3_5" style="display: none"></div>
						</td>
					</tr>
				</table>
				</div>
				</td>
				<td width="8%" align="center" valign="top"style="padding-right: 5px">
					<input type="button" value="删 除" onClick="deleteItem();"/>
				</td>
				<td width="50%" align="left" valign="top">
				<textarea id="inputContent" onblur="saveContent();" style="width: 90%; height: 410px">大学学位已成为社会工作的基本门槛，也成为父母提供子女的基本，子女教育具有不具时间弹性和费用弹性，不象住房规划和退休规划，如财礼不足，可以减低标准，子女教育的时间点和费用比较固定，需要及早规划。</textarea>
				</td>
			</tr>
		</table>
		</td>
	</tr>
</table>
</body>
</html>