javascript动态修改Li节点值的方法_Javascript教程-查字典教程网
javascript动态修改Li节点值的方法
javascript动态修改Li节点值的方法
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了javascript动态修改Li节点值的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:修改Li的值funct...

本文实例讲述了javascript动态修改Li节点值的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>修改Li的值</title>

<script type="text/javascript">

function gel(id) {

return document.getElementById(id);

}

//全局的input输入控制

var inpt = document.createElement("input");

inpt.setAttribute("type", "text");

inpt.onblur = function() {

//alert("tet");

this.parentElement.innerHTML = inpt.value;

};

window.onload = function() {

var lis = gel("ulList").childNodes;

for (var i = 0; i < lis.length; i++) {

if (lis[i].nodeType == 1) {

lis[i].ondblclick = function () {

//删除文本

inpt.value = this.innerHTML;

this.removeChild(this.firstChild);

this.appendChild(inpt);

//获取焦点

inpt.focus();

//在inpt这个控件失去焦点的时候,也要绑定一个事件,把inpt中的文本值返回给当前li

//编写inpt.onblur

};

}

}

};

</script>

</head>

<body>

<ul id="ulList">

<li>北京</li>

<li>山西</li>

<li>上海</li>

<li>天津</li>

<li>河南</li>

</ul>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类