Jathon_hs
- 浏览: 18002 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
以前在网上都看到过类似的功能，不过没自己想要实现过，这次刚好做静态页面中有这样的一个需求，就试着自己做做看，做完发现也不是什么很难的事情。
效果如图所示：
代码分享
<html>
<head>
<title></title>
<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;'> </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){
inputContentDiv.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 (inputCells[0].id=="inputTd_"+currTab+"_"+eval("globalLineId_"+currTab)){
if (confirm("确认要删除吗？")){
inputTab.deleteRow(inputRows[i].rowIndex);
if (rowsLength-1<6){
addNewRow();
}
return;
}
}
}
}else{
alert("请选择再删除");
}
}
//-->
</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>
- 大小: 34.9 KB
1
顶
顶
0
踩
踩
分享到：
评论
3 楼
Jathon_hs
2008-10-31
achun 写道
楼主的方法太复杂了.DOMElement有一个contentEditable属性,主流浏览器都支持的.
Html代码
<div contentEditable=true>你试一下</div> <div contentEditable=true>你试一下</div>
不错，不错，这么一来只要改变一下CSS样式就可以了。谢谢achun指点！
2 楼
achun
2008-10-30
楼主的方法太复杂了.
DOMElement有一个contentEditable属性,主流浏览器都支持的.
DOMElement有一个contentEditable属性,主流浏览器都支持的.
<div contentEditable=true>你试一下</div>
1 楼
shanghui_12
2008-10-29
栏目一多，不知道博主的代码要写多少行了。建议命名采取控件数组方式，点击触发事件传递是哪行改变了，对应显示编辑框
发表评论
相关推荐
下面我们将详细探讨如何用JS实现"即点即编辑"功能。 首先，我们需要理解这个功能的基本工作原理。当用户点击可编辑的文本时，原本显示的文本区域会隐藏，取而代之的是一个输入框（`<input>`元素），用户可以在...
这需要监听编辑器的事件，如`keyup`或`change`，并用JavaScript实现数据同步的逻辑。 5. **事件处理**：编辑器之间的交互可能会触发各种事件，比如复制、粘贴、撤销、重做等。需要编写事件处理函数来处理这些操作，...
js组件实现编辑器简单功能，自己项目中的，可以参考
用arcgis api for javascript 3.23实现的简单编辑功能 能绘制点线面
在本案例中，我们关注的是"js实现涂抹功能"，即利用JavaScript来实现对图片进行涂抹的效果。这种功能常见于图像编辑软件，让用户能够模拟画笔在图像上涂抹，创造出各种视觉效果。 首先，描述中提到了两种技术：SVG...
在JavaScript的世界里，实现类似Excel的表格编辑功能是一项常见的需求，尤其在开发Web应用程序时。Handsontable是一款强大的开源库，专门用于创建交互式的、功能丰富的数据网格，它提供了类似于Excel的表格编辑体验...
在加载时，将JSON数据解析并恢复到组件状态，实现编辑器的保存和恢复工作流。 综上所述，基于Vue.js和JavaScript的数据大屏可视化编辑器设计与实现是一个综合性的项目，涉及前端框架的应用、数据处理、组件化编程、...
在实现编辑功能时，可能需要定义一些类来改变被选中单元格的样式，比如边框、背景色等，以提示用户当前单元格正处于编辑状态。 5. **数据持久化**：用户在表格中输入的数据需要在页面刷新或关闭后仍然保留。这可能...
在实现遮罩层时，可以使用javascript来实现可编辑遮罩层的功能。例如，可以使用`contenteditable`属性来设置遮罩层的可编辑性，然后使用javascript来处理用户的编辑操作。 知识点7：兼容性问题 在实现遮罩层时，...
6. **事件监听与处理**：JavaScript通过addEventListener等方法监听用户的键盘输入、鼠标点击等事件，根据事件类型和参数执行相应的函数，实现编辑器的动态响应。 7. **跨平台兼容性**：由于不同的浏览器可能对...
2. **ace-editor / codemirror**: 这是两个流行的JavaScript代码编辑器库，提供了丰富的代码编辑功能，如语法高亮、代码折叠、自动完成等。它们可以轻松集成到网页中，为用户提供专业级别的代码编辑体验。 3. **...
JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格
在【压缩包子文件的文件名称列表】中，"4Editor 文本编辑框"可能是包含实现编辑器功能的源代码文件或示例项目。这个文件夹可能包含了HTML文件（用于构建编辑器界面），CSS文件（用于样式设计），以及JavaScript文件...
- 高级特性：如果编辑框具备富文本编辑功能，可能使用`contenteditable`属性，使任何HTML元素变为可编辑区域，允许插入图片、格式化文本等。 5. **性能优化**： - 使用事件委托：当有许多动态生成的元素时，为父...
ace.js编辑器是一个功能强大的开源代码编辑器，它以JavaScript为基础，并通过浏览器提供丰富的编辑功能。以下是关于ace.js编辑器的详细描述： 首先，ace.js编辑器支持多种编程语言，包括但不限于JavaScript、HTML、...
标签中的"表格 编辑"进一步明确了我们关注的核心技术点：如何使用JavaScript和jQuery来实现表格元素的编辑功能。这通常涉及到监听用户事件，如点击、键盘输入等，以及动态修改HTML元素的状态，如设置或清除编辑模式...
Kevin Roth’s Cross Browser Rich Text Editor是一个基于JavaScript实现的在线编辑器，支持多种浏览器和操作系统。Kevin Roth’s Cross Browser Rich Text Editor提供了许多插件和主题，用户可以根据需要进行自定义...
本案例展示了如何利用PHP和CodeIgniter框架结合前端的JavaScript和AJAX技术实现一个简单的商品列表即点即改功能。其中涉及到的技术点包括前端的DOM操作、事件绑定、AJAX通信以及后端的数据处理和数据库操作。这种即...
3. **javascript**：与"js"相同，这里强调了JavaScript在实现在线编辑器中的核心地位。 4. **插件**：在线编辑器可能通过插件机制扩展功能，允许开发者添加自定义组件或整合第三方服务，如云存储、OCR识别等。 5. ...