这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
以前在网上都看到过类似的功能,不过没自己想要实现过,这次刚好做静态页面中有这样的一个需求,就试着自己做做看,做完发现也不是什么很难的事情。
效果如图所示:
分享代码喽:
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <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) {
- inputContentinputContentDiv.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">
- <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>
- <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>
- 教育学费
- </div>
- <input id="inputText_1_1" onblur="switchShow(false,1, 1);" type="text"
- class="inputmess" style="width: 100%; display: none" value="教育学费">
- <div>
- 大学学位已成为社会工作的基本门槛,也成为父母提供子女的基本,子女教育具有不具时间弹性和费用弹性,不象住房规划和退休规划,如财礼不足,可以减低标准,子女教育的时间点和费用比较固定,需要及早规划。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_1_2" height="22px;" onclick="switchShow(true, 2, 1);"
- style="border-bottom: solid 1px #000;">
- <div>
- 住宿费
- </div>
- <input id="inputText_1_2" onblur="switchShow(false,2, 1);" type="text"
- class="inputmess" style="width: 100%; display: none" value="住宿费">
- <div>
- 住宿费项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_1_3" height="22px;" onclick="switchShow(true, 3, 1);"
- style="border-bottom: solid 1px #000;">
- <div>
- 生活费
- </div>
- <input id="inputText_1_3" onblur="switchShow(false,3, 1);" type="text"
- class="inputmess" style="width: 100%; display: none" value="生活费">
- <div>
- 生活费项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_1_4" height="22px;" onclick="switchShow(true, 4, 1);"
- style="border-bottom: solid 1px #000;">
- <div>
- 其他
- </div>
- <input id="inputText_1_4" onblur="switchShow(false,4, 1);" type="text"
- class="inputmess" style="width: 100%; display: none" value="其他">
- <div>
- 其他项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_1_5" height="22px;" onclick="switchShow(true, 5, 1);"
- style="border-bottom: solid 1px #000;">
- <div>
- </div>
- <input id="inputText_1_5" onblur="switchShow(false,5, 1);" type="text"
- class="inputmess" style="width: 100%; display: none" value="">
- <div>
- </div>
- </td>
- </tr>
- </table>
- </div>
- <div>
- <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>
- 西北地区
- </div>
- <input id="inputText_2_1" onblur="switchShow(false,1, 2);" type="text"
- class="inputmess" style="width: 100%; display: none" value="西北地区">
- <div>
- 配置适用地区,西北地区,项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_2_2" height="22px;" onclick="switchShow(true, 2, 2);"
- style="border-bottom: solid 1px #000;">
- <div>
- 福建省
- </div>
- <input id="inputText_2_2" onblur="switchShow(false,2, 2);" type="text"
- class="inputmess" style="width: 100%; display: none" value="福建省">
- <div>
- 配置适用地区,福建省,项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_2_3" height="22px;" onclick="switchShow(true, 3, 2);"
- style="border-bottom: solid 1px #000;">
- <div>
- 北京市
- </div>
- <input id="inputText_2_3" onblur="switchShow(false,3, 2);" type="text"
- class="inputmess" style="width: 100%; display: none" value="北京市">
- <div>
- 配置适用地区,北京市,项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_2_4" height="22px;" onclick="switchShow(true, 4, 2);"
- style="border-bottom: solid 1px #000;">
- <div>
- </div>
- <input id="inputText_2_4" onblur="switchShow(false,4, 2);" type="text"
- class="inputmess" style="width: 100%; display: none" value="">
- <div>
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_2_5" height="22px;" onclick="switchShow(true, 5, 2);"
- style="border-bottom: solid 1px #000;">
- <div>
- </div>
- <input id="inputText_2_5" onblur="switchShow(false,5, 2);" type="text"
- class="inputmess" style="width: 100%; display: none" value="">
- <div>
- </div>
- </td>
- </tr>
- </table>
- </div>
- <div>
- <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>
- 低成本预算方案
- </div>
- <input id="inputText_3_1" onblur="switchShow(false,1, 3);" type="text"
- class="inputmess" style="width: 100%; display: none" value="低成本预算方案">
- <div>
- 配置预算方案,低成本预算方案,项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_3_2" height="22px;" onclick="switchShow(true, 2, 3);"
- style="border-bottom: solid 1px #000;">
- <div>
- 普通预算方案
- </div>
- <input id="inputText_3_2" onblur="switchShow(false, 2, 3);" type="text"
- class="inputmess" style="width: 100%; display: none" value="普通预算方案">
- <div>
- 配置预算方案,普通预算方案,项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_3_3" height="22px;" onclick="switchShow(true, 3, 3);"
- style="border-bottom: solid 1px #000;">
- <div>
- 豪华预算方案
- </div>
- <input id="inputText_3_3" onblur="switchShow(false,3, 3);" type="text"
- class="inputmess" style="width: 100%; display: none" value="豪华预算方案">
- <div>
- 配置预算方案,豪华预算方案,项目说明。
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_3_4" height="22px;" onclick="switchShow(true, 4, 3);"
- style="border-bottom: solid 1px #000;">
- <div>
- </div>
- <input id="inputText_3_4" onblur="switchShow(false,4, 3);" type="text"
- class="inputmess" style="width: 100%; display: none" value="">
- <div>
- </div>
- </td>
- </tr>
- <tr>
- <td id="inputTd_3_5" height="22px;" onclick="switchShow(true, 5, 3);"
- style="border-bottom: solid 1px #000;">
- <div>
- </div>
- <input id="inputText_3_5" onblur="switchShow(false, 5, 3);" type="text"
- class="inputmess" style="width: 100%; display: none" value="">
- <div>
- </div>
- </td>
- </tr>
- </table>
- </div>
- </td>
- <td width="8%" align="center" valign="top">
- <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>
JS 实现即点即编辑功能代码
JS 实现完美 include 加载功能代码
JS 实现程序暂停与继续功能代码解读
js 输入框邮箱自动提示功能代码实现
JS 实现一键回顶功能示例代码
js 实现截图保存图片功能的代码示例
js 实现多图左右切换功能
原生 js 实现自由拖拽弹窗代码 demo
JS 实现 table 表格数据排序功能 (可支持动态数据 + 分页效果)
在 IE8 上 JS 实现 combobox 支持拼音检索功能
JS 实现左右无缝轮播图代码
基于 JS 实现 EOS 隐藏错误提示层代码
来源: http://www.phperz.com/article/17/0628/287800.html