ホームページ > 記事 > ウェブフロントエンド > JS实现即点即编辑功能代码_javascript技巧

JS实现即点即编辑功能代码_javascript技巧

WBOYオリジナル: 2016-05-16 18:59:271265ブラウズ

效果如图所示：

分享代码喽：

<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;'> </script>

" + "" + ""; 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){ inputContentinputContentDiv.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 　

配置预算项目

教育学费

住宿费

生活费

其他

配置适用地区

西北地区

福建省

北京市

配置预算方案

低成本预算方案

普通预算方案

豪华预算方案

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Prototype使用指南之selector.js说明_prototype次の記事：prototype Element学习笔记(Element篇三)_prototype

続きを見る

JS实现即点即编辑功能代码_javascript技巧

関連記事