ホームページ >ウェブフロントエンド >jsチュートリアル >JSでポイント＆クリック編集機能を実現 code_javascriptスキル

JSでポイント＆クリック編集機能を実現 code_javascriptスキル

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

効果は図に示すとおりです:

コードを共有します:

<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>
<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>
</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){ 
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 <rowslength i inputcells='inputRows[i].getElementsByTagName("td");' if inputtab.deleterow addnewrow return alert>

<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;">北西部地域<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>
<input id="inputText_2_1" onblur="switchShow(false,1, 2);" type="text" class="inputmess" style="幅: 100%; 表示: なし" value="北西部">
<div id="inputContentDiv_2_1" style="display: none">該当するリージョン、北西部リージョン、プロジェクトの説明を構成します。 <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;

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"; 
} 
}

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

</rowslength>
</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;">福建省
<input id="inputText_2_2" onblur="switchShow(false,2, 2);" type="text" class="inputmess" style="幅: 100%; 表示: なし" value="福建省">
<div id="inputContentDiv_2_2" style="display: none">設定適用地域、福建省、プロジェクトの説明。 
</div>
</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;">北京
<input id="inputText_2_3" onblur="switchShow(false,3, 2);" type="text" class="inputmess" style="幅: 100%; 表示: なし" value="北京">
<div id="inputContentDiv_2_3" style="display: none">構成適用可能な地域、北京、プロジェクトの説明。 
</div>
</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;">
<input id="inputText_2_4" onblur="switchShow(false,4, 2);" type="text" class="inputmess" style="幅: 100%; 表示: なし" value="">
<div id="inputContentDiv_2_4" style="display: none">
</div>
</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;">
<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>
</div>
</td>
</tr>

テーブル>
<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">予算計画を構成する
<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>

</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>
</td>
<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">予算計画、低コスト予算計画、プロジェクトの説明を構成します。 <td width="8%" align="center" valign="top" style="padding-right: 5px">
<input type="button" value="删 除" onclick="deleteItem();">
</td>
<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;">通常の予算プラン<td width="50%" align="left" valign="top">
<input id="inputText_3_2" onblur="switchShow(false, 2, 3);" type="text" class="inputmess" style="幅: 100%; 表示: なし" value="通常の予算プラン">
<div id="inputContentDiv_3_2" style="display: none">予算計画、通常予算計画、およびプロジェクトの説明を構成します。 <textarea id="inputContent" onblur="saveContent();" style="width: 90%; height: 410px">

贅沢な予算プラン

JSでポイント＆クリック編集機能を実現 code_javascriptスキル

関連記事