JS实现即点即编辑功能代码

效果如图所示：

分享代码喽：

<html> <head> <title></title> <script LANGUAGE="JavaScript">    </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"><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;"> 教育学费 <input id="inputText_1_1" onblur="switchShow（false,1, 1）;" type="text" class="inputmess" style="width: 100%; display: none" value="教育学费"> 大学学位已成为社会工作的基本门槛，也成为父母提供子女的基本，子女教育具有不具时间弹性和费用弹性，不象住房规划和退休规划，如财礼不足，可以减低标准，子女教育的时间点和费用比较固定，需要及早规划。 </td> </tr> <tr> <td id="inputTd_1_2" height="22px;" onclick="switchShow（true, 2, 1）;" style="border-bottom: solid 1px #000;"> 住宿费 <input id="inputText_1_2" onblur="switchShow（false,2, 1）;" type="text" class="inputmess" style="width: 100%; display: none" value="住宿费"> 住宿费项目说明。 </td> </tr> <tr> <td id="inputTd_1_3" height="22px;" onclick="switchShow（true, 3, 1）;" style="border-bottom: solid 1px #000;"> 生活费 <input id="inputText_1_3" onblur="switchShow（false,3, 1）;" type="text" class="inputmess" style="width: 100%; display: none" value="生活费"> 生活费项目说明。 </td> </tr> <tr> <td id="inputTd_1_4" height="22px;" onclick="switchShow（true, 4, 1）;" style="border-bottom: solid 1px #000;"> 其他 <input id="inputText_1_4" onblur="switchShow（false,4, 1）;" type="text" class="inputmess" style="width: 100%; display: none" value="其他"> 其他项目说明。 </td> </tr> <tr> <td id="inputTd_1_5" height="22px;" onclick="switchShow（true, 5, 1）;" style="border-bottom: solid 1px #000;"><input id="inputText_1_5" onblur="switchShow（false,5, 1）;" type="text" class="inputmess" style="width: 100%; display: none" value=""></td> </tr> </table> <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;"> 西北地区 <input id="inputText_2_1" onblur="switchShow（false,1, 2）;" type="text" class="inputmess" style="width: 100%; display: none" value="西北地区"> 配置适用地区，西北地区，项目说明。 </td> </tr> <tr> <td id="inputTd_2_2" height="22px;" onclick="switchShow（true, 2, 2）;" style="border-bottom: solid 1px #000;"> 福建省 <input id="inputText_2_2" onblur="switchShow（false,2, 2）;" type="text" class="inputmess" style="width: 100%; display: none" value="福建省"> 配置适用地区，福建省，项目说明。 </td> </tr> <tr> <td id="inputTd_2_3" height="22px;" onclick="switchShow（true, 3, 2）;" style="border-bottom: solid 1px #000;"> 北京市 <input id="inputText_2_3" onblur="switchShow（false,3, 2）;" type="text" class="inputmess" style="width: 100%; display: none" value="北京市"> 配置适用地区，北京市，项目说明。 </td> </tr> <tr> <td id="inputTd_2_4" height="22px;" onclick="switchShow（true, 4, 2）;" style="border-bottom: solid 1px #000;"><input id="inputText_2_4" onblur="switchShow（false,4, 2）;" type="text" class="inputmess" style="width: 100%; display: none" value=""></td> </tr> <tr> <td id="inputTd_2_5" height="22px;" onclick="switchShow（true, 5, 2）;" style="border-bottom: solid 1px #000;"><input id="inputText_2_5" onblur="switchShow（false,5, 2）;" type="text" class="inputmess" style="width: 100%; display: none" value=""></td> </tr> </table> <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;"> 低成本预算方案 <input id="inputText_3_1" onblur="switchShow（false,1, 3）;" type="text" class="inputmess" style="width: 100%; display: none" value="低成本预算方案"> 配置预算方案，低成本预算方案，项目说明。 </td> </tr> <tr> <td id="inputTd_3_2" height="22px;" onclick="switchShow（true, 2, 3）;" style="border-bottom: solid 1px #000;"> 普通预算方案 <input id="inputText_3_2" onblur="switchShow（false, 2, 3）;" type="text" class="inputmess" style="width: 100%; display: none" value="普通预算方案"> 配置预算方案，普通预算方案，项目说明。 </td> </tr> <tr> <td id="inputTd_3_3" height="22px;" onclick="switchShow（true, 3, 3）;" style="border-bottom: solid 1px #000;"> 豪华预算方案 <input id="inputText_3_3" onblur="switchShow（false,3, 3）;" type="text" class="inputmess" style="width: 100%; display: none" value="豪华预算方案"> 配置预算方案，豪华预算方案，项目说明。 </td> </tr> <tr> <td id="inputTd_3_4" height="22px;" onclick="switchShow（true, 4, 3）;" style="border-bottom: solid 1px #000;"><input id="inputText_3_4" onblur="switchShow（false,4, 3）;" type="text" class="inputmess" style="width: 100%; display: none" value=""></td> </tr> <tr> <td id="inputTd_3_5" height="22px;" onclick="switchShow（true, 5, 3）;" style="border-bottom: solid 1px #000;"><input id="inputText_3_5" onblur="switchShow（false, 5, 3）;" type="text" class="inputmess" style="width: 100%; display: none" value=""></td> </tr> </table></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>

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