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

更新时间：2008年10月29日 15:37:53 作者：

以前在网上都看到过类似的功能，不过没自己想要实现过，这次刚好做静态页面中有这样的一个需求，就试着自己做做看，做完发现也不是什么很难的事情。

效果如图所示：

分享代码喽：

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS
可编辑

如何利用moment处理时间戳并计算时间的差值
前端很多场景都会涉及到对时间的处理,我所用得最多的库是moment,下面这篇文章主要给大家介绍了关于如何利用moment处理时间戳并计算时间的差值的相关资料,需要的朋友可以参考下
2022-04-04
js实现n秒倒计时后才可以点击的效果
这篇文章主要介绍了js点击按钮在倒计时后才可以点击的效果,需要的朋友可以参考下
2015-12-12
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
这篇文章主要为大家详细介绍了Bootstrap 最常用的JS插件，包括图片轮播carousel.js、标签切换tab.js、滚动监听scrollspy.js等，感兴趣的小伙伴们可以参考一下
2016-07-07
微信小程序简易计算器实现代码实例
这篇文章主要介绍了微信小程序简易计算器实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
详解CommonJS和ES6模块循环加载处理的区别
这篇文章主要介绍了详解CommonJS和ES6模块循环加载处理的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
kmock javascript 单元测试代码
javascript其实是非常需要单元测试的，但是qmock总感觉不好使？或是文档的新旧有问题，反正我暂时是只需要函数调用的次数判断，结果就写了个kmock
2011-02-02
无缝滚动js代码通俗易懂(自写)
本人闲暇时自写的无缝滚动js，代码简单实用，通俗易懂，晒出来与大家共享，感兴趣的朋友可以参考下哈
2013-06-06
llqrcode js识别二维码解析二维码信息实例
这篇文章主要为大家介绍了llqrcode js识别二维码解析二维码信息实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
基于JS判断对象是否是数组
这篇文章主要介绍了基于JS判断对象是否是数组,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
JS实现图片上传预览功能
本文给大家分享一段js代码关于实现图片上传预览功能，代码简单易懂，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具