当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-01 09:54 编辑：来源：阅读：
扫一扫，手机访问

摘要：JS实现即点即编辑功能代码

效果如图所示： [img]http://files.jb51.net/upload/20081029153807515.jpg[/img] 分享代码喽：

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
<tr height="30px"> 
<td></td> 
</tr> 
<tr height="300px;" valign="top"> 
<td align="right" width="50%"> 
<table align="center" cellpadding="0" cellspacing="0" width="88%"> 
<tr> 
<td align="center" valign="top" width="30%"> 
<div style="height: 130px; width: 100%; overflow-y: scroll; border: 1px solid #000;"> 
<table align="center" cellpadding="0" cellspacing="0" id="inputTab_1" style="margin-top: 0px" width="100%"> 
<tr> 
<td style="padding-left: 5px; text-align: left; background-color: #EAEBDB; height: 25px; border-bottom: solid 1px #000">配置预算项目 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_1_1" onclick="switchShow(true, 1, 1);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_1_1" style="padding-left: 3px;">教育学费</div> 
<input class="inputmess" id="inputText_1_1" onblur="switchShow(false,1, 1);" style="width: 100%; display: none" type="text" value="教育学费"> 
<div id="inputContentDiv_1_1" style="display: none">大学学位已成为社会工作的基本门槛，也成为父母提供子女的基本，子女教育具有不具时间弹性和费用弹性，不象住房规划和退休规划，如财礼不足，可以减低标准，子女教育的时间点和费用比较固定，需要及早规划。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_1_2" onclick="switchShow(true, 2, 1);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_1_2" style="padding-left: 3px;">住宿费</div> 
<input class="inputmess" id="inputText_1_2" onblur="switchShow(false,2, 1);" style="width: 100%; display: none" type="text" value="住宿费"> 
<div id="inputContentDiv_1_2" style="display: none">住宿费项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_1_3" onclick="switchShow(true, 3, 1);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_1_3" style="padding-left: 3px;">生活费</div> 
<input class="inputmess" id="inputText_1_3" onblur="switchShow(false,3, 1);" style="width: 100%; display: none" type="text" value="生活费"> 
<div id="inputContentDiv_1_3" style="display: none">生活费项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_1_4" onclick="switchShow(true, 4, 1);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_1_4" style="padding-left: 3px;">其他</div> 
<input class="inputmess" id="inputText_1_4" onblur="switchShow(false,4, 1);" style="width: 100%; display: none" type="text" value="其他"> 
<div id="inputContentDiv_1_4" style="display: none">其他项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_1_5" onclick="switchShow(true, 5, 1);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_1_5" style="padding-left: 3px;"></div> 
<input class="inputmess" id="inputText_1_5" onblur="switchShow(false,5, 1);" style="width: 100%; display: none" type="text" 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 align="center" cellpadding="0" cellspacing="0" id="inputTab_2" style="margin-top: 0px" width="100%"> 
<tr> 
<td style="padding-left: 5px; text-align: left; background-color: #EAEBDB; height: 25px; border-bottom: solid 1px #000">配置适用地区 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_2_1" onclick="switchShow(true, 1, 2);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_2_1" style="padding-left: 3px;">西北地区</div> 
<input class="inputmess" id="inputText_2_1" onblur="switchShow(false,1, 2);" style="width: 100%; display: none" type="text" value="西北地区"> 
<div id="inputContentDiv_2_1" style="display: none">配置适用地区，西北地区，项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_2_2" onclick="switchShow(true, 2, 2);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_2_2" style="padding-left: 3px;">福建省</div> 
<input class="inputmess" id="inputText_2_2" onblur="switchShow(false,2, 2);" style="width: 100%; display: none" type="text" value="福建省"> 
<div id="inputContentDiv_2_2" style="display: none">配置适用地区，福建省，项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_2_3" onclick="switchShow(true, 3, 2);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_2_3" style="padding-left: 3px;">北京市</div> 
<input class="inputmess" id="inputText_2_3" onblur="switchShow(false,3, 2);" style="width: 100%; display: none" type="text" value="北京市"> 
<div id="inputContentDiv_2_3" style="display: none">配置适用地区，北京市，项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_2_4" onclick="switchShow(true, 4, 2);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_2_4" style="padding-left: 3px;"></div> 
<input class="inputmess" id="inputText_2_4" onblur="switchShow(false,4, 2);" style="width: 100%; display: none" type="text" value=""> 
<div id="inputContentDiv_2_4" style="display: none"></div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_2_5" onclick="switchShow(true, 5, 2);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_2_5" style="padding-left: 3px;"></div> 
<input class="inputmess" id="inputText_2_5" onblur="switchShow(false,5, 2);" style="width: 100%; display: none" type="text" 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 align="center" cellpadding="0" cellspacing="0" id="inputTab_3" style="margin-top: 0px" width="100%"> 
<tr> 
<td style="padding-left: 5px; text-align: left; background-color: #EAEBDB; height: 25px; border-bottom: solid 1px #000">配置预算方案 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_3_1" onclick="switchShow(true, 1, 3);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_3_1" style="padding-left: 3px;">低成本预算方案</div> 
<input class="inputmess" id="inputText_3_1" onblur="switchShow(false,1, 3);" style="width: 100%; display: none" type="text" value="低成本预算方案"> 
<div id="inputContentDiv_3_1" style="display: none">配置预算方案，低成本预算方案，项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_3_2" onclick="switchShow(true, 2, 3);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_3_2" style="padding-left: 3px;">普通预算方案</div> 
<input class="inputmess" id="inputText_3_2" onblur="switchShow(false, 2, 3);" style="width: 100%; display: none" type="text" value="普通预算方案"> 
<div id="inputContentDiv_3_2" style="display: none">配置预算方案，普通预算方案，项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_3_3" onclick="switchShow(true, 3, 3);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_3_3" style="padding-left: 3px;">豪华预算方案</div> 
<input class="inputmess" id="inputText_3_3" onblur="switchShow(false,3, 3);" style="width: 100%; display: none" type="text" value="豪华预算方案"> 
<div id="inputContentDiv_3_3" style="display: none">配置预算方案，豪华预算方案，项目说明。</div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_3_4" onclick="switchShow(true, 4, 3);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_3_4" style="padding-left: 3px;"></div> 
<input class="inputmess" id="inputText_3_4" onblur="switchShow(false,4, 3);" style="width: 100%; display: none" type="text" value=""> 
<div id="inputContentDiv_3_4" style="display: none"></div> 
</td> 
</tr> 
<tr> 
<td height="22px;" id="inputTd_3_5" onclick="switchShow(true, 5, 3);" style="border-bottom: solid 1px #000;"> 
<div id="inputDiv_3_5" style="padding-left: 3px;"></div> 
<input class="inputmess" id="inputText_3_5" onblur="switchShow(false, 5, 3);" style="width: 100%; display: none" type="text" value=""> 
<div id="inputContentDiv_3_5" style="display: none"></div> 
</td> 
</tr> 
</table> 
</div> 
</td> 
<td align="center" style="padding-right: 5px" valign="top" width="8%"> 
<input onclick="deleteItem();" type="button" value="删 除"> 
</td> 
<td align="left" valign="top" width="50%"> 
<textarea id="inputContent" onblur="saveContent();" style="width: 90%; height: 410px">大学学位已成为社会工作的基本门槛，也成为父母提供子女的基本，子女教育具有不具时间弹性和费用弹性，不象住房规划和退休规划，如财礼不足，可以减低标准，子女教育的时间点和费用比较固定，需要及早规划。</textarea>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：再谈querySelector和querySelectorAll的区别与联系
下一篇：JS判断form内所有表单是否为空的简单实例

资讯排行榜
更多>>