直接双击页面元素进行修改的HTML代码

在Tencent空间和部分网址上大家经习见到交互性很强的效劳。一些顾客资料能够一直双击出现文本框,并在这里输入新的素材就能够修改,无需再按明确开关等。。

Firefox/Chrome/Opera从某一本子最早已经帮忙这一风味,但ie种类正是是ie9也还不协理,所以需求通过javascript来同盟那几个不援救placeholder本性的浏览器。

JQuery结合Ajax达成双击Table表格,使Table形成可编写制定,并保存到数据库中,jqueryajax

     
方今在做项目时,要完成通过双击Table表格的TVision GT,使Table行产生可编写制定,来兑现修改数据并保存到数据库中的功能,无需多说,间接贴代码吧。希望能博得各位同事指正。 
     

图片 1 1
function tdEdit(element, id) { 2 var i_a = “<input class=’edit_td’
type=’text’ style=’height:30px; width:40px;’ value='”; 3 var i_b =
“‘/>”; 4 var t_a = “<textarea class=’tarea’ cols=’63’ rows=’3′
style=’width:90%’>”; 5 var t_b = “</textarea>”; 6 var td =
$(element).find(“td”); 7 if (td.length > 0) { 8 var sc =
$(element).children().eq(1).text(); 9 var ss =
$(element).children().eq(2).text(); 10 var sequence =
$(element).children().eq(3).text(); 11 var weight =
$(element).children().eq(4).text(); 12 var max =
$(element).children().eq(5).text(); 13 var min =
$(element).children().eq(6).text(); 14 var cv =
$(element).children().eq(7).text(); 15 var explain =
$(element).children().eq(8).text(); 16 17
$(element).children().eq(1).html($(t_a + sc + t_b)); 18
$(element).children().eq(2).html($(t_a + ss + t_b)); 19
$(element).children().eq(3).html($(i_a + sequence + “‘id=’num1” +
i_b)); 20 $(element).children().eq(4).html($(i_a + weight +
“‘id=’num2” + i_b)); 21 $(element).children().eq(5).html($(i_a + max +
“‘id=’maxvalue” + i_b)); 22 $(element).children().eq(6).html($(i_a +
min + “‘id=’minvalue” + i_b)); 23
$(element).children().eq(7).html($(t_a + cv + t_b)); 24
$(element).children().eq(8).html($(t_a + explain + t_b)); 25 } 26
$(“.edit_td”卡塔尔(قطر‎.click(function (State of Qatar { 27 return false; 28 }卡塔尔(قطر‎; 29
$(“.tarea”卡塔尔.click(function (卡塔尔 { 30 return false; 31 }卡塔尔国; 32 //获取关节 33
$(“.edit_td”卡塔尔国.trigger(“focus”State of Qatar; 34 $(“.tarea”卡塔尔.trigger(“focus”卡塔尔(قطر‎; 35 36
//文本框失去大旨后提交内容,重新形成文本 37 $(“.save”卡塔尔(قطر‎.click(function (){ 38 //验证音信”n”:/^d+$/ 39 var reg =
/^[0-9]+.{0,1}[0-9]{0,2}$/; 40 var num1 = $(“#num1”).val(); 41
var num2 = $(“#num2”).val(); 42 var max = $(“#maxvalue”).val(); 43 var
min = $(“#minvalue”卡塔尔(قطر‎.val(卡塔尔; 44 if (parseInt(min卡塔尔(قطر‎ > parseInt(max卡塔尔卡塔尔 {
45 alert(“最小值不可能高出最大值!”State of Qatar; 46 return false; 47 } 48 if
(!reg.test(num1) || !reg.test(num2) || !reg.test(max) || !reg.test(minState of QatarState of Qatar{ 49 alert(“请输入数字!”State of Qatar; 50 return false; 51 } 52 //重新赋上新值 53
$(“.edit_td”).each(function (i) { 54 var newtxt = $(this).val(); 55
$(element).children().eq(i + 3).html(newtxt); 56 }); 57
$(“.tarea”).each(function (j) { 58 var newtarea = $(this).val(); 59 if
(j < 2) { 60 $(element).children().eq(j + 1).html(newtarea); 61 } 62
else { 63 $(element).children().eq(j + 5).html(newtarea); 64 } 65 }); 66
67 var new_sc = $(element).children().eq(1).text(); 68 var new_ss =
$(element).children().eq(2).text(); 69 var new_sequence =
$(element).children().eq(3).text(); 70 var new_weight =
$(element).children().eq(4).text(); 71 var new_max =
$(element).children().eq(5).text(); 72 var new_min =
$(element).children().eq(6).text(); 73 var new_cv =
$(element).children().eq(7).text(); 74 var new_explain =
$(element).children().eq(8).text(); 75 if (new_sc != sc || new_ss !=
ss || new_sequence != sequence || new_weight != weight || new_max !=
max || new_min != min || new_cv != cv || new_explain != explain) { 76
$.ajax({ 77 type: ‘POST’, 78 contentType: ‘application/json’, 79 url:
‘/Ajax/AjaxAction.ashx/UpdateRuleDetail’, 80 data: ‘{id:”‘ + id +
‘”,strCon:”‘ + new_sc + ‘”,strStandard:”‘ + new_ss + ‘”,Sequence:”‘ +
new_sequence + ‘”,Weight:”‘ + new_weight + ‘”,CandidateValue:”‘ 81 +
new_cv + ‘”,MaxValue:”‘ + new_max + ‘”,MinValue:”‘ + new_min +
‘”,Explain:”‘ + new_explain + ‘”}’, 82 dataType: ‘json’, 83 async:
true, 84 beforeSend: function (State of Qatar { 85 }, 86 success: function (data卡塔尔国 {
87 alert(“保存成功!”State of Qatar; 88 window.location.reload(卡塔尔(قطر‎; //刷新页面 89 }, 90
error: function (XMLHttpRequest, textStatus, errorThrown卡塔尔(قطر‎ { 91
alert(XMLHttpRequest + ‘:’ + textStatus卡塔尔(قطر‎; 92 window.location.reload(卡塔尔(قطر‎;
93 } 94 }卡塔尔; 95 } 96 else { 97 alert(“温馨指示:您未有做其余改造!”卡塔尔(قطر‎; 98
window.location.reload(State of Qatar; 99 } 100 101 }卡塔尔(قطر‎; 102 } JS

  前台页面绑定: 

图片 21 <tr
ondblclick=”tdEdit(this,@item.ID)”></tr> Html

   
 最终效果图:图片 3

图片 4

那个成效形似较难,其实实现起来超级粗略,只需几行代码就可达成。希望对一些新手有所扶持,高手请飘过~

广阔的做法
于今遍布运用的做法是通过表单成分的onfocus/onblur事件来退换value值,如下:

javascript怎完结双击table的td完毕编辑,并得以保留到数据库

网页上,想输入文字,是需求文本框帮衬的。所以,想完毕宏观效果,提出td中投入2个因素:
<span></span>
<input type=”text”>
选取jquery绑定td的双击事件dblclick,事件效果:将span的文件赋值给input的value,隐敝span,呈现input
使用jquery绑定input的难题错失事件blur,事件效果:将input的value赋值给span的文本,隐蔽input,显示span
瞩目,table起头化的时候,span呈现,input掩饰,何况span中的文本与input的value相似
 

留意代码中加粗部分。

复制代码 代码如下:

jquery双击事件,双击表格变成可编写制定

$(表格对象卡塔尔.dbclick(function(卡塔尔(قطر‎{
赢得编辑区的地点和分寸
收获编辑文本的近日值

创制三个input成分
把这几个input成分之处和大小覆盖到编辑区的上边并取得主题
$(这个input元素).blur(function(){
修正编辑区的文书
剔除这么些input成分
});
});
 

近些日子在做项目时,要完结通过双击Table表格的T凯雷德,使Table行变…

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN xmlns=
content=text/html; charset=utf-8
/title直接双击页面成分进行校勘的HTML代码/titlescript
type=text/javascriptfunction ShowElement(element卡塔尔国{ var oldhtml =
element.innerHTML; //得到成分在此之前的开始和结果 var newobj =
document.createElement(input卡塔尔; //创建三个input成分 newobj.type = text;
//为newobj成分增多类型 //设置newobj失去主题的风波 newobj.onblur =
function(State of Qatar{ element.innerHTML = this.value ? this.value : oldhtml;
//当触发时决断newobj的值是或不是为空,为空则不校勘,并重临oldhtml。 }
element.innerHTML = ; //设置成分内容为空 element.appendChild(newobj卡塔尔国;
//增多子成分 newobj.focus(卡塔尔; //获得宗旨}/script/headbodydl dt客户名:/dt
dd ondblclick=ShowElement(this卡塔尔笨笨狼/dd dt个人宣言/dt dd
ondblclick=ShowElement(this卡塔尔这个家伙很懒,什么也没留下!/dd/body/html

<input type=”text” id=”text1″ />
<script>
var el = document.getElementById(“text1”);
if (el.value == “”)
el.value = “提醒音讯”;

el.onfocus = function() {
if (this.value == “提醒音信”State of Qatar
this.value = “”;
};
el.onblur = function() {
if (this.value == “”)
this.value = “提醒消息”;
}
</script>

jQuery的各个watermark插件(

这种做法直接操作表单成分,方便急速,比较实用。

但它也有坏处:

稍加操作近似须求通过监听表单成分的value值来兑现效果与利益,比方:autocomplete、验证等
表单提交时需求清空它的值
金科玉律恐怕还会有任何缺欠,这里不再列举。

更加好的做法
为了制止引起不供给的劳动,将要防止去更动表单元素的value值。

第一,倘若犹如下一个文本框:

复制代码 代码如下:

<input type=”text” />

既然无法更改文本框的值,那么只好通过增加叁个span或任何因素,并通过相对定位放置到文本框之上,并在外框加二个position:relative的器皿来包装它们以保证提醒音信不会发出偏移,如:

复制代码 代码如下:

<span style=”position:relative;”>
<span style=”position:absolute;”>提醒音信</span>
<input type=”text” />
</span>

无意中窥见Taobao的登陆页面并无需额外加一层position:relative的器皿来包装也不会发生偏移,所以仅必要把提醒消息的符号放在文本框早前就可以,如下:

复制代码 代码如下:

<span style=”position:absolute;”>提醒音讯</span>
<input type=”text” />

那样子产生的号子越发简明。
相应的样式
既是最终表现的标志已经规定,那么未来就须要定义相应的体裁,来使它看起来越来越赏心悦目貌,如下:

复制代码 代码如下:

/* 标志的要害样式 style */
.w-label {
position: absolute;
padding: 0 0 0 6px;
margin: 0;
font-size: .8em;
color: #999;
opacity: 1;
}
/* 隐藏标识 */
.w-hide {
visibility: hidden;
opacity: 0;
}
/* 表单成分获得宗旨时,标识的颜色 */
.w-active {
color: #ddd;
}

那正是说html就相应的成为:

复制代码 代码如下:

<span class=”w-label”>提醒音信</span>
<input type=”text” />

有关的脚本
虽说没有必要去退换表单成分的value值来兑现效果与利益,但照旧必要经过onfocus/onblur事件来支配提醒新闻的号子,全部完结如下:

复制代码 代码如下:

/* 事件绑定 */
var addEvent = document.addEventListener ?
function(element, type, fn) {
element.addEventListener(type, fn, false);
} :
function(element, type, fn) {
element.attachEvent(“on” + type, fn);
},
/* 事件消亡绑定 */
removeEvent = document.removeEventListener ?
function(element, type, fn) {
element.removeEventListener(type, fn, false);
} :
function(element, type, fn) {
element.detachEvent(“on” + type, fn);
},
/* 文本框水印/占位符 */
watermark = function(element, text) {
if (!(this instanceof watermark))
return new watermark(element, text);
var place = document.createElement(“span”卡塔尔;//提醒消息标志
element.parentNode.insertBefore(place,
element卡塔尔;//插入到表单成分早先的职位
place.className = “w-label”;
place.innerHTML = text;
place.style.height = place.style.lineHeight = element.offsetHeight +
“px”;//设置中度、行高以居中
element.place = this;
function hideIfHasValue() {
if (element.value && place.className.indexOf(“w-hide”) == -1)
place.className += ” w-hide”;
}
function onFocus() {
hideIfHasValue()
if (!element.value && place.className.indexOf(“w-active”) == -1)
place.className += ” w-active”;
}
function onBlur() {
if (!element.value) {
place.className = place.className.replace(” w-active”, “”);
place.className = place.className.replace(” w-hide”, “”);
}
}
function onClick() {
hideIfHasValue();
try {
element.focus && element.focus();
} catch (ex) {}
}
// 注册种种事件
hideIfHasValue();
addEvent(element, “focus”, onFocus);
addEvent(element, “blur”, onBlur);
addEvent(element, “keyup”, hideIfHasValue);
addEvent(place, “click”, onClick);
// 取消watermark
this.unload = function() {
removeEvent(element, “focus”, onFocus);
removeEvent(element, “blur”, onBlur);
removeEvent(element, “keyup”, hideIfHasValue);
removeEvent(place, “click”, onClick);
element.parentNode.removeChild(place);
element.place = null;
};
};

如上代码分别通过表单成分的focus/blur/keyup事件来调整提醒音讯标志的展现、蒙蔽及体制;别的还通过提醒音信标志的click事件来掩藏它及为表单元素取得主旨。
最终提供二个unload方法来打消watermark。
实际使用
有了以上的js及css,那么就足以一向运用它们来促成watermark功效了,如下演示应用及吊销watermark:

复制代码 代码如下:

<input id=”text1″ type=”text” />
<input type=”button” id=”button1″ value=”取消watermark” />
<script>
var m1 = watermark(document.getElementById(“text1″卡塔尔, “提醒新闻”State of Qatar;
addEvent(document.getElementById(“button1”), “click”, function() {
m1.unload();
});
</script>

html5 placeholder兼容
既然如此有了上述的兑现,那么宽容不协助html5
placeholder的浏览器也很简短,首先,须求看清浏览器是不是补助placeholder:

复制代码 代码如下:

var html5support = “placeholder” in document.createElement(“input”);

随之,对不支持html5
placeholder的浏览器,提取表单成分的placeholder内容,完毕如下:

复制代码 代码如下:

placeHolderForm = function(form) {
var ph, elems = form.elements,
html5support = “placeholder” in document.createElement(“input”);
if (!html5support) {
for (var i = 0, l = elems.length; i < l; i++) {
ph = elems[i].getAttribute(“placeholder”);
if (ph) elems[i].ph = watermark(elems[i], ph);
}
}
}

示范代码如下:

复制代码 代码如下:

<form id=”form2″>
<fieldset>
<legend><strong>对不帮助html5
placeholder的表单成分运用watermark</strong></legend>
<ul>
<li>
文本框:
<input type=”text” placeholder=”文本框文本框” />
</li>
<li>
密码框:
<input type=”password” placeholder=”密码框密码框” />
</li>
<li>
多行文本:
<textarea placeholder=”多行文本多行文本”></textarea>
</li>
</ul>
</fieldset>
</form>
<script>
placeHolderForm(document.getElementById(“form2”));
</script>

结尾
时至后日,功效全体达成,放上全部代码:点击下载,如有额外部必要要可活动修正。
作者:囧月
出处:

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图