如何实现可编辑表格单元格效果

如何实现可编辑表格单元格效果:
在不少的网页都有这样的效果，可以编辑表格中的内容，非常的方便，在本站特效下载和网络上有一个可编辑单元格的实例，但是通过分析发现有诸多问题，最大一个问题就是浏览器不具有浏览器兼容性，所以本站写了一个简单的能偶兼容所有主流浏览器的效果，下面就通过实例简单介绍一下如何实现可以编辑单元格的效果，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
#main
{
 width:304px;
 margin:0px auto;
}
ul
{ 
 height:25px; 
 width:302px;
 line-height:25px; 
 border:1px solid green; 
 border-top:0px; 
 font-size:12px;
 text-align:center;
 list-style:none; 
 padding:0px; 
 margin:0px;
}
ul li
{ 
 display:block; 
 width:100px; 
 height:25px; 
 float:left;
 color:#999;
}
.thead
{ 
 background:#F1FADE; 
 color:#F90;
 font-weight:bold; 
 border-top:1px solid green;
}
.leftborder
{
 border-left:1px solid green; 
}
input
{
 background-color:#FFC;
 border:none;
 outline:none;
 color:#F90;
 text-align:center;
}
</style>
<script type="text/javascript">
var preEdited="";
var prenewNode;
var newNode=document.createElement("input");
newNode.type="text";
 
function editCell(myEvent)
{
 editTarget=myEvent.srcElement?myEvent.srcElement:myEvent.target;
 
 if(editTarget.tagName=="INPUT")
 {
  stopPao(myEvent);
  return;
 }
 
 if(preEdited!="")
 {
  preEdited.innerHTML=newNode.value;
 }
 
 if(editTarget.tagName=="LI"&&editTarget.parentNode.getAttribute("class")!="thead")
 {
  newNode.value=editTarget.innerHTML;
  editTarget.innerHTML="";
  newNode.style.width="100px";
  newNode.style.height="23px";
  editTarget.appendChild(newNode);
  preEdited=editTarget;
  newNode.focus();
 }
 stopPao(myEvent);
}
 
function stopPao(myEvent)
{
 if(window.event)
 {
  event.cancelBubble=true
 }
 else
 {
  myEvent.stopPropagation()
 }
}
 
window.onload=function()
{
 var main=document.getElementById("main");
 
 main.onclick=function(ev)
 {
  var oEvent=ev||event; 
  editCell(oEvent);
 }
 document.onclick=function()
 {
  if(preEdited!="")
  {
   preEdited.innerHTML=newNode.value;
  }
 }
}
</script>
</head>
<body>
<div id="main">
 <ul class="thead">
  <li>前台专区</li>
  <li class="leftborder">后台专区</li>
  <li class="leftborder">交流专区</li>
 </ul>
 <ul>
  <li>div+css专区</li>
  <li class="leftborder">ASP专区</li>
  <li class="leftborder">搜索优化</li>
 </ul>
 <ul>
  <li>HTML专区</li>
  <li class="leftborder">ASP.NET专区</li>
  <li class="leftborder">如何建站</li>
 </ul>
 <ul>
  <li>jQuery专区</li>
  <li class="leftborder">HP专区</li>
  <li class="leftborder">站长交流</li>
 </ul>
 <ul>
  <li>搜索优化</li>
  <li class="leftborder">教程下载</li>
  <li class="leftborder">特效下载</li>
 </ul>
</div>
</body>
</html>

以上代码实现了基本的可编辑表格效果，当然代码可能算不上完美，应该还会有更好的方法实现此功能，或者说代码性能能够更加优化，不过这里目的只是给出一个实现此功能的思路，当然如果有兴趣可以去深究一下，下面简单介绍一下实现此功能的步骤:
一.实现原理:
创建一个input文本框，当点击单元格的时候会将原来单元格中的内容赋值给创建的文本框，并将单元格的innerHTML设置为空，然后通过appendChild(newNode)将创建的input文本框添加到单元格中，这样就实现了点击单元格出现一个可编辑区域，进行编辑即可，将当前编辑单元格赋值给变量preEdited。当点击其他单元格的时候，会将文本框的当前值赋给原来单元格（之前被赋值的preEdited）的innerHTML，这样就实现了点击其他单元格时，上一个被编辑的单元格被保存的功能，这样就基本实现编辑表格的功能。下面再来介绍一下需要注意的几个知识点，对单元格的点击事件并没有分别绑定到每一个单元格上，而是利用事件冒泡原理绑定它父元素main上。为了实现点击表格之外的区域实现被编辑单元格内容保存功能，为document绑定了一个onclick事件，当点击网页其他地方的时候也会实现被编辑单元格内容保存功能，还要特别注意的一点就是在editCell()函数中调用了stopPao()函数就是在组织事件冒泡的现象的发生，防止事件冒泡到document，触发自定义的onclick事件。
二.代码注释:
1.var preEdited=""声明一个变量用以存放上一个被编辑的单元格对象。
2.var newNode=document.createElement("input")创建一个input对象。
3.newNode.type="text"将input对象的类型设置为text，也就是一个文本框。
4.function editCell(myEvent)创建一个函数，参数为一个事件对象。
4.1.editTarget=myEvent.srcElement?myEvent.srcElement:myEvent.target将事件源对象（也就是点击的哪一个单元格）赋值给editTarget，这里采用兼容性。
4.2.if(editTarget.tagName=="INPUT")判断当前点击的是否是input标签，如果是则结束函数的执行，可以防止点击点击正在编辑的文本框内容时，被保存的现象。语句里面调用了stopPao(myEvent)函数为了防止事件冒泡到document。
4.3.if(preEdited!="")用来判断preEdited是否为空，如果为空说明是首次点击单元格，如果preEdited不为空的话，说明之前已经编辑过单元格，并将编辑后的内容保存。
4.4.if(editTarget.tagName=="LI"&&editTarget.parentNode.getAttribute("class")!="thead")用来判断点击的是否是标题，如果是标题，则不执行编辑操作，如果不是标题则执行主体代码。
4.5.newNode.value=editTarget.innerHTML将被点击的单元格中的内容赋值给创建的input文本框。
4.6.editTarget.innerHTML=""将被点击文本框内容清空。
4.7.newNode.style.width="100px"和newNode.style.height="23px"设置文本框的尺寸。
4.8.editTarget.appendChild(newNode)将创建的文本框节点添加到被编辑的单元格，这样显现被编辑状态了。
4.9.preEdited=editTarget将当前单元格对象赋值给preEdited。
4.10.newNode.focus()让文本框获得焦点。
4.11.stopPao(myEvent)阻止事件冒泡到document。
5.function stopPao(myEvent)创建一个阻止事件冒泡的函数。
6.window.onload=function(){}当文档加载完成在去执行主体代码。
7.main.onclick=function(ev){}为main绑定onclick事件处理函数，采用了浏览器兼容写法。
8.document.onclick=function(){}为document绑定onclick事件处理函数实现点击表格区域之外地方也可以实现被编辑内容保存功能。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0405/135.html

你可能感兴趣的:(表格)

  • Python 数据分析：numpy，抽提，基本索引。听故事学知识点怎么这么容易？ 好开心啊没烦恼 numpypython数据分析numpy开发语言数据挖掘人工智能机器学习
    目录1示例代码2欢迎纠错3免费爬虫------以下关于Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导
  • Python 编辑器：Geany，不是内部或外部命令，系统找不到指定路径
    目录1找到设置选项2开始设置2.1complie2.2execute3欢迎纠错4免费爬虫------以下关于Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，
  • Python 数据分析：numpy.transpose() ，转换维度。听故事学知识点怎么这么容易？ 好开心啊没烦恼 numpynumpypython开发语言数据分析数据挖掘人工智能机器学习
    目录1一维数组2二维数组3三维数组4欢迎纠错5免费爬虫------以下关于Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowch
  • 【V2.0 - 侦查篇】数据可视化：我用一行代码，抓到了播放量的“头号杀手” 爱分享的飘哥 信息可视化
    系列回顾：在上一篇《我的播放量“薛定谔”了，所以，我给它建了个“数据公墓”》中，我们成功地为杂乱的创作数据找到了一个整洁的家。但数据入库只是第一步，面对着这张整齐却冰冷的表格，一个新的问题浮现在我脑海中…一、后台的“数据迷雾”打开任何一个自媒体后台，我们都会被淹没在数据的海洋里：播放量、点赞率、评论率、粉丝转化率、完播率、跳出率…“后台几十个指标，看得人眼花缭乱。但哪个才是真正的‘牛鼻子’？哪个指
  • WPF 常用布局控件的基础使用 Dr.多喝热水 WPFwpf
    WPF常用布局控件在WPF中，布局控件（也叫布局容器）负责安排子元素（比如按钮、文本框等）的摆放位置。1.Grid（网格布局）Grid是最常用的布局控件，它把空间划分成行和列，可以让子元素按照表格方式排列。示例：说明：RowDefinitions和ColumnDefinitions分别定义了行和列。Height="Auto"表示高度根据内容自动调整。Height="*"表示分配剩余空间。2*表示是
  • Java+POI+EXCEL导出折线图到Excel表格中 雾林小妖 java项目解决方案excel
    1、问题概述？本案例使用POI版本：5.2.3在项目中我们经常需要将项目中的数据以图标的形式导出，以下是，以JAVA+POI技术，将数据以折线图导出到Excel表格中。2、实现方式--折线图2.1、导入依赖包-案例完整pom.xml文件此处需要注意，我是用的springboot版本是2.17.6版本。同时需要注意commons-lang3的版本，版本尽量高一些，否则会报错，我使用的是3.12.0。
  • 【小白Java进阶之路】 2024年Java小白如何成为大牛？超详细学习路线图！ 全栈陈序员 Java后端开发java学习windows
    ??2024年Java小白如何成为大牛？超详细学习路线图！摘要本文为Java初学者提供了一份详细的学习路线图，旨在帮助他们从基础到进阶，最终成为Java领域的专家。文章涵盖了Java基础、进阶技术、Web开发、框架与工具、软技能等多个方面，并提供了代码示例、流程图和表格，以增强理解和实践能力。关键词Java,学习路线图,进阶,Web开发,框架,工具,软技能1.Java基础1.1语法基础变量和数据类
  • antd Table組件，实现三次表格嵌套； 烟雨-yaya react.jsjavascript前端
    文章目录概要示例代码技术细节小结概要本次学习到使用antd里table组件实现三级表格嵌套；父级点击+号出现子表；子级点击+号出现孙表；示例table表格录制代码importReact,{useEffect,useState,useMemo}from"react";import{Table,Divider}from"antd";constMultiLevelTable=()=>{const[exp
  • 【vue导入导出Excel】vue简单实现导出和导入复杂表头excel表格功能【纯前端版本和配合后端版本】 2401_84433535 前端vue.jsexcel
    ### 配合后端的两个方法 因为上面的纯前端写法有一个问题，就是有分页的时候我们没法拿到数据。或者数据太大了我们下载实在是有点慢和卡。所以基本上工作中都是后端生成下载链接导出的。这里再分享两个方法。1,[a标签](https://bbs.csdn.net/topics/618166371)下载这种方法核心就是后端直接生成下载链接，前端只需要生成A标签然后下载就行了。较为常用的一个daochu(){
  • matplotlib 绘制热力图 扶子 pythonmatplotlib绘图代码matplotlibpython经验分享热力图
    1、功能介绍：使用了matplotlib和seaborn两个python库来创建并显示一个热力图。热力图是一种通过颜色变化来表示二维表格数据集中值分布的图形，适合用于展示矩阵数据或数据分析结果中的模式和趋势。2、代码部分：importmatplotlib.pyplotaspltimportseabornassnsimportnumpyasnp#设置中文字体plt.rcParams['font.sa
  • 从Python到数据结构：为什么这是每个自学者必经的进阶之路 流水煮香茗 python数据结构mooc
    当你熟练掌握Python语法后，下一步应该学什么？答案是数据结构。本文将深入分析为什么数据结构是编程进阶的关键，以及如何选择合适的学习资源。一、Python学会了，然后呢？如果你正在读这篇文章，很可能你已经：用Python写过小工具，能解决工作和生活中的一些小需求做过数据分析，会用pandas处理Excel表格但是，当你想要进一步提升时，却发现了一些困惑：困惑1：代码能跑，但总觉得"不够优雅"你的
  • 基于PaddleOCR的表格识别系统开发 pk_xz123456 仿真模型深度学习算法深度学习开发语言分类安全cnn
    基于PaddleOCR的表格识别系统开发1.项目概述本项目旨在使用PaddleOCR框架开发一个高性能的表格识别系统，能够准确识别约30种不同类型的表格结构。系统将处理2500张合成表格图像作为训练数据，并在合成测试集上进行评估。系统核心功能包括表格检测、表格结构识别和表格内容识别三部分。1.1项目背景表格是信息传递的重要载体，广泛存在于各类文档中。传统表格识别方法需要复杂的规则和模板，而基于深度
  • IPv4 前缀长度与主机位关系大全表（/0 到 /32）-版本2 韩公子的Linux大集市 二网络AiOps服务器网络运维
    文章目录关键说明：以下是IPv4地址空间中前缀长度与主机位关系的完整表格大全，按照前缀长度从小到大（主机位从大到小）排列：前缀长度子网掩码主机位数量地址总数可用主机数典型应用场景/00.0.0.0324,294,967,296不可用默认路由/1128.0.0.0312,147,483,648不可用理论划分/2192.0.0.0301,073,741,8241,073,741,822国家级网络/32
  • Java 数组的创建、取值、赋值 Y1_again_0_again Javajava开发语言
    一、一维数组1.1什么是一维数组一维数组是指仅包含一个维度的数据集合，类似于Excel表格中的单行数据，例如{1,2,3}。1.2在元素已知的情况下创建一维数组语法格式：数据类型[]数组名={值1,值2,值3,...};元素访问：通过数组下标获取元素，格式为数组名[数组下标]。需要注意的是，数组下标从0开始计数，即a[0]表示数组a的第一个元素，依此类推。示例1：创建一个整型一维数组，并输出其第1
  • AI教学应用 作业多元化和教师批改多样化 蹦跑的蜗牛 AI人工智能ai
    AI教学应用作业多元化和教师批改多样化目标是解决「作业形式多样化+教师批改压力大+教学反馈个性化不足」的问题一、需求大学生的作业和高中完全不一样，比如：作业类型多：可能是论文/实验报告（文字类）、Python代码（编程类）、电路仿真图（图片类）、小组调研视频（视频类）、甚至社会调查的问卷数据（表格类）。教师批改难：比如一篇5000字的论文，老师要检查逻辑、查重、给修改建议；一份代码作业要跑通测试、
  • word表格后面空白页怎么删除 w怀瑾握瑜 word
    一、万能法（把空白页段落标记设置的非常小就OK）（我这边百用百灵）1、首先选中空白页的这个段落标记2、然后点击段落的这个小框3、然后4、大功告成可以看到空白页的那个段落标记已经变得非常小，挤在表格下面，已经不会多占一页了
  • 【AI成长会】针对高并发场景下基于用户ID的聊天接口优化方案，包含5个核心方法
    以下是针对高并发场景下基于用户ID的聊天接口优化方案，包含5个核心方法、对比表格及权威来源：5大优化方案1.索引优化机制：对user_id字段添加B+树索引，联合查询字段使用覆盖索引（如(user_id,timestamp)）优化点：减少全表扫描，提升索引命中率适用场景：基础优化，所有规模均需2.缓存层引入（Redis/Memcached）机制：使用Redis存储用户最近聊天记录（Key:user
  • n8n和dify有什么区别 小雷FansUnion AI2025人工智能
    n8nvsDify全面对比分析1.产品定位对比1.1核心定位差异维度n8nDify产品类型工作流自动化平台AI应用开发平台主要用途连接不同服务，实现业务自动化快速构建AI聊天机器人和应用目标用户业务人员、运营人员、开发者AI应用开发者、产品经理核心价值提升工作效率，减少重复劳动降低AI应用开发门槛1.2应用场景对比n8n应用场景：├──数据同步自动化│├──CRM与邮件系统同步│├──表格数据自动
  • AI表格数据分析
    简单发一篇文章，最近看到AI数据分析是越来越火了哈，把简单的流程进行一次简要的分享。AI数据分析的本质，是“结构化数据→模式识别→可视化表达+洞察输出”。1、分析流程详解：（1）数据预处理什么是数据预处理呢？其实它可以理解成你给的是什么。步骤1：识别数据结构表头，字段的含义等。步骤2：清洗数据去除空值、格式错误、重复数据。步骤3：类型识别判断哪些是时间字段？哪些是数值型？哪些是分类字段？总结：类似
  • 【pdf】Java代码生成PDF Leslie_Lei #pdfpdfjava
    目录依赖创建单元格表格数据行辅助添加方法创建表头单元格创建下划线创建带下划线的文字创建PDF依赖com.itextpdfitextpdf5.4.2org.apache.pdfboxpdfbox2.0.13com.itextpdfitext-asian5.2.0创建单元格/***创建单元格**@paramtext显示值*@paramfont字体*@paramhorizontalAlign值水平显示位
  • 浅拷贝 ... 的作用 徐福记c 开发脚手架python
    浅拷贝在编程和软件开发中有重要的意义，尤其是在处理数据和对象时。以下是浅拷贝的主要意义：1.数据安全和隔离浅拷贝可以创建一个新对象，这个新对象包含原对象属性值的副本。对于基本数据类型（如数字、字符串等），浅拷贝会直接复制其值，而对于引用数据类型（如对象、数组等），它会复制引用地址。在修改新对象时，不会直接修改原对象的值（对于基本数据类型），从而保证了原数据的安全性。例如：在表格编辑场景中，通过浅拷
  • Markdown 叶子202422 Python学习记录python
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Mark
  • DAY 10 机器学习建模与评估 心落薄荷糖 Python训练营机器学习人工智能
    知识点：1.数据集的划分2.机器学习模型建模的三行代码3.机器学习模型分类问题的评估今日代码比较多，但是难度不大，仔细看看示例代码，好好理解下这几个评估指标。作业：尝试对心脏病数据集采用机器学习模型建模和评估#一、导入库importpandasaspdimportpandasaspd#用于数据处理和分析，可处理表格数据。importnumpyasnp#用于数值计算，提供了高效的数组操作。impor
  • el-table合并行+数据按照相同名称排序+相同名称内的数据在排序 Web·强 elementui遇到的问题前端javajavascript
    项目场景：项目需求：后端给我返回的数据：原因分析：后端数据所有的内容排列是无顺序的相同名称的不一定靠在一起图片只是巧合，如果按照后端返回的格式直接赋给表格的tabledata那么顺序就不是我们想要的，所以我们首先要把数据处理成我们想要的数据格式。①根据需求首先把数据里的相同名称进行排序然后在将相同名称里的版本从高到低排序②将名称相同的合并成一行并将序号也进行合并解决方案：需求①：this.tabl
  • 实现 el-table 中键盘方向键导航功能vue2+vue3（类似 Excel）
    实现el-table中键盘方向键导航功能vue2+vue3（类似Excel）功能需求在ElementUI的el-table表格中实现以下功能：使用键盘上下左右键在可编辑的el-input/el-select之间移动焦点焦点移动时自动定位到对应单元格支持光标位置自动调整，提升编辑体验完整解决方案(vue2)1.表格结构修改在el-table中添加键盘事件监听，并为可编辑元素添加定位标识：2.核心Ja
  • Markdown编辑器 写文章方法 Joel Jin 笔记
    Markdown编辑器欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Mar
  • uniapp中表格固定列（Vue） ᥬ 小月亮 小程序+H5uni-appvue.jsjavascript
    一、编写表格：主要是使用了position:sticky;进行固定，不要忘记写top/left/right/bottom的数值哦~表头1表头2表头3表头4表头5表头6操作{{item.data1}}{{item.data2}}{{item.data3}}{{item.data4}}{{item.data5}}{{item.data6}}详情exportdefault{data(){return{t
  • 微信小程序 progress 进度条 内部圆角及内部条渐变色 Bonnie(大宝) 技术小程序
    微信小程序表格微信小程序progress进度条内部圆角及渐变色html:css:.wx-progress-inner-bar{border-radius:8rpx!important;background:linear-gradient(toright,rgb(71,187,254,1),rgba(254,86,77,1))!important;}
  • element ui plus 找不到bodyWrapper实现两个表格同步滚动的方法。 不二家大哥哥 前端vue.jsjavascript
    mounted(){this.dom1=this.$refs.table1;this.dom2=this.$refs.table2;this.dom1.$el.addEventListener("mouseover",(e)=>{this.flag=false;//此处的flag判断是否主动滚动了当前tablethis.dom2.$el.addEventListener("mouseover",(
  • vue3 使用 Univer Sheets 电子表格组件 小云小白 vue3excelUniverSheet
    背景部门要进行在线数据填报：excel表格样式不限;因为要支持直接从excel直接粘贴，经筛选选择：UniverSheetsUniverSheets官网地址https://docs.univer.ai/zh-CN/guides/sheets1、安装和配置#安装核心包pnpmadd@univerjs/presets正常到这就可以了，但是我这边前台报react版本错误，所以去源码包看了一下版本，单独指
  • rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
     这是我自己想到的问题，结果去知呼提问，还没等别人回答， 我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
  • java编程思想 -- 数据的初始化 百合不是茶 java数据的初始化
      1.使用构造器确保数据初始化      /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
  • [航天与宇宙]为什么发射和回收航天器有档期 comsci
           地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁...        所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
  • linux下批量替换文件内容 商人shang linux替换
    1、网络上现成的资料 　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串 　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
  • 网页在线天气预报 oloz 天气预报
    网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
  • SpringMVC和Struts2比较 杨白白 springMVC
    1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。 参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
  • refuse copy, lazy girl! 小桔子 copy
           妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！  
  • apache与php整合 aichenglong php apache web
    一  apache web服务器 1 apeche web服务器的安装   1)下载Apache web服务器   2)配置域名(如果需要使用要在DNS上注册)   3)测试安装访问http://localhost/验证是否安装成功 2 apache管理   1)service.msc进行图形化管理   2)命令管理，配
  • Maven常用内置变量 AILIKES maven
    Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
  • java的类和对象 百合不是茶 JAVA面向对象 类 对象
    java中的类：     java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决   java使用 class 类名   来创建类 ，在Java中类名要求和构造方法，Java的文件名是一样的   创建一个A类： class A{ }   java中的类：将某两个事物有联系的属性包装在一个类中，再通
  • JS控制页面输入框为只读 bijian1013 JavaScript
    在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。  
  • AngularJS与服务器交互 bijian1013 JavaScriptAngularJS$http
            对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
  • [Maven学习笔记八]Maven常用插件应用 bit1129 maven
    常用插件及其用法位于：http://maven.apache.org/plugins/   1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin           1. Jetty Pl
  • 【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
    1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括： 文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
  • 杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
    nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
  • UI设计中我们为什么需要设计动效 brotherlamp UIui教程ui视频ui资料ui自学
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用你的产品。
  • Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan javaspring
    参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
  • 数据库连接池的工作原理 chicony 数据库连接池
           随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动 态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查 询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
  • java 关键字 CrazyMizzz java
    关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：    （1）访问修饰符       public,private,protected       p
  • Hive中的排序语法 daizj 排序hiveorder byDISTRIBUTE BYsort by
    Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。 与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
  • 单态设计模式 dcj3sjt126com 设计模式
      单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。 使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{    // 保存类实例在此属性中    private static&
  • svn locked dcj3sjt126com Lock
    post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
  • ARM寄存器学习 e200702084 数据结构C++cC#F#
    无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。     ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）     不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
  • 常用编码资料 gengzg 编码
    List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
  • 进程 vs. 线程 hongtoushizi 线程linux进程
    我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。 首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。 如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。 如果用多线程实现
  • Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linuxcrontab
    一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来： 第一段 代表分钟 0—59 第二段 代表小时 0—23 第三段 代表日期 1—31 第四段 代表月份 1—12 第五段 代表星期几，0代表星期日 0—6   如： */1 * * * *   每分钟执行一次。 *
  • KMP算法详解 hm4123660 数据结构C++算法字符串KMP
         字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。       假设主串s="ababcabcacbab",模式串为t="
  • 枚举类型的单例模式 zhb8015 单例模式
    E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
  • Kafka+Storm+HDFS ssydxa219 storm
    cd /myhome/usr/stormbin/storm nimbus &amp;bin/storm supervisor &amp;bin/storm ui &amp;Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
  • Java获取本地服务器的IP 中华好儿孙 javaWeb获取服务器ip地址
    System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他