快捷導(dǎo)航

JS實現(xiàn)即點即編輯功能代碼

更新時間：2008年10月29日 15:37:53 作者：

以前在網(wǎng)上都看到過類似的功能，不過沒自己想要實現(xiàn)過，這次剛好做靜態(tài)頁面中有這樣的一個需求，就試著自己做做看，做完發(fā)現(xiàn)也不是什么很難的事情。

效果如圖所示：

分享代碼嘍：

<html> <head> <title></title>  </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">配置預(yù)算項目 </td> </tr> <tr> <td id="inputTd_1_1" height="22px;" onclick="switchShow(true, 1, 1);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   id="inputDiv_1_1" style="padding-left: 3px;">教育學(xué)費</div> <input id="inputText_1_1" onblur="switchShow(false,1, 1);" type="text" class="inputmess" style="width: 100%; display: none" value="教育學(xué)費"> <div   class="ublnpf9mb"   id="inputContentDiv_1_1" style="display: none">大學(xué)學(xué)位已成為社會工作的基本門檻，也成為父母提供子女的基本，子女教育具有不具時間彈性和費用彈性，不象住房規(guī)劃和退休規(guī)劃，如財禮不足，可以減低標(biāo)準(zhǔn)，子女教育的時間點和費用比較固定，需要及早規(guī)劃。</div> </td> </tr> <tr> <td id="inputTd_1_2" height="22px;" onclick="switchShow(true, 2, 1);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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">配置適用地區(qū) </td> </tr> <tr> <td id="inputTd_2_1" height="22px;" onclick="switchShow(true, 1, 2);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   id="inputDiv_2_1" style="padding-left: 3px;">西北地區(qū)</div> <input id="inputText_2_1" onblur="switchShow(false,1, 2);" type="text" class="inputmess" style="width: 100%; display: none" value="西北地區(qū)"> <div   class="ublnpf9mb"   id="inputContentDiv_2_1" style="display: none">配置適用地區(qū)，西北地區(qū)，項目說明。</div> </td> </tr> <tr> <td id="inputTd_2_2" height="22px;" onclick="switchShow(true, 2, 2);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   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   class="ublnpf9mb"   id="inputContentDiv_2_2" style="display: none">配置適用地區(qū)，福建省，項目說明。</div> </td> </tr> <tr> <td id="inputTd_2_3" height="22px;" onclick="switchShow(true, 3, 2);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   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   class="ublnpf9mb"   id="inputContentDiv_2_3" style="display: none">配置適用地區(qū)，北京市，項目說明。</div> </td> </tr> <tr> <td id="inputTd_2_4" height="22px;" onclick="switchShow(true, 4, 2);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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">配置預(yù)算方案 </td> </tr> <tr> <td id="inputTd_3_1" height="22px;" onclick="switchShow(true, 1, 3);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   id="inputDiv_3_1" style="padding-left: 3px;">低成本預(yù)算方案</div> <input id="inputText_3_1" onblur="switchShow(false,1, 3);" type="text" class="inputmess" style="width: 100%; display: none" value="低成本預(yù)算方案"> <div   class="ublnpf9mb"   id="inputContentDiv_3_1" style="display: none">配置預(yù)算方案，低成本預(yù)算方案，項目說明。</div> </td> </tr> <tr> <td id="inputTd_3_2" height="22px;" onclick="switchShow(true, 2, 3);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   id="inputDiv_3_2" style="padding-left: 3px;">普通預(yù)算方案</div> <input id="inputText_3_2" onblur="switchShow(false, 2, 3);" type="text" class="inputmess" style="width: 100%; display: none" value="普通預(yù)算方案"> <div   class="ublnpf9mb"   id="inputContentDiv_3_2" style="display: none">配置預(yù)算方案，普通預(yù)算方案，項目說明。</div> </td> </tr> <tr> <td id="inputTd_3_3" height="22px;" onclick="switchShow(true, 3, 3);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   id="inputDiv_3_3" style="padding-left: 3px;">豪華預(yù)算方案</div> <input id="inputText_3_3" onblur="switchShow(false,3, 3);" type="text" class="inputmess" style="width: 100%; display: none" value="豪華預(yù)算方案"> <div   class="ublnpf9mb"   id="inputContentDiv_3_3" style="display: none">配置預(yù)算方案，豪華預(yù)算方案，項目說明。</div> </td> </tr> <tr> <td id="inputTd_3_4" height="22px;" onclick="switchShow(true, 4, 3);" style="border-bottom: solid 1px #000;"> <div   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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   class="ublnpf9mb"   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">大學(xué)學(xué)位已成為社會工作的基本門檻，也成為父母提供子女的基本，子女教育具有不具時間彈性和費用彈性，不象住房規(guī)劃和退休規(guī)劃，如財禮不足，可以減低標(biāo)準(zhǔn)，子女教育的時間點和費用比較固定，需要及早規(guī)劃。</textarea> </td> </tr> </table> </td> </tr> </table> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: