看看这个应该如何做，进来看看吧

qingwa_ifeng 2012-03-14 01:34:51



<div>

    <div onclick="txtReplick">第一条测试</div>

    <div onclick="txtReplick">第二条测试</div>

    <div onclick="txtReplick">第三条测试</div>

</div>

要求：
点击这条信息，在这个div中添加一个文本框，一个按钮，这个文本康里面的内容是这个div里面的内容，然后点击这个按钮，把文本框里面修改的内容赋给这个div

不知道描述的清楚不，望各位帮忙解决下

...全文

143 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

bennman 2012-03-14

打赏
举报

用了1楼的判断



<div>

    <div onclick="txtReplick(this)" >第一条测试</div>

    <div onclick="txtReplick(this)">第二条测试</div>

    <div onclick="txtReplick(this)" >第三条测试</div>

</div>

<script type="text/javascript">

    function txtReplick(el){

        var bool=(el.getElementsByTagName('input').length)>0;

				if(bool){return;}

				var val=el.innerHTML;

				el.innerHTML+='<input type="text" value="'+val+'" /><input type="button" value="save" onclick="save(this,event)" />';

    }

		function save(obj,event){

			stopBubble(event);

			var txt=obj.previousSibling.value;

			obj.parentNode.innerHTML=txt;

		}

    function stopBubble(e){

        if(e && e.stopPropagation){

        e.stopPropagation();    //w3c

        }else window.event.cancelBubble=true; //IE

    }

</script>

qingwa_ifeng 2012-03-14

打赏
举报

[Quote=引用 5 楼 bennman 的回复:]

引用 4 楼 qingwa_ifeng 的回复:

引用 2 楼 bennman 的回复:

HTML code

<div>
<div onclick="txtReplick(this)" flag="off">第一条测试</div>
<div onclick="txtReplick(this)" flag="off">第二条测试</div>
<div onclick="tx……
[/Quote]

能不能帮我改成我说的哪个样子，我是准备加服务器控件的，

bennman 2012-03-14

打赏
举报

[Quote=引用 4 楼 qingwa_ifeng 的回复:]

引用 2 楼 bennman 的回复:

HTML code

<div>
<div onclick="txtReplick(this)" flag="off">第一条测试</div>
<div onclick="txtReplick(this)" flag="off">第二条测试</div>
<div onclick="txtReplick(this)" flag="off">第……
[/Quote]

也可以不过这样好获取输入框的值就要加ID了

qingwa_ifeng 2012-03-14

打赏
举报

[Quote=引用 2 楼 bennman 的回复:]

HTML code

<div>
<div onclick="txtReplick(this)" flag="off">第一条测试</div>
<div onclick="txtReplick(this)" flag="off">第二条测试</div>
<div onclick="txtReplick(this)" flag="off">第三条测试</div>
</di……
[/Quote]

不能够直接这样吗



el.innerHTML="<input type=" + "text" + " value=" + "第一条测试" + " /><input type=" + "button" + " value=" + "保存" + " onclick=" + "save()" + " />";

hellNo 2012-03-14

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<title>动态添加表单元素</title> 

</head> 



<script language="javascript"> 

var input=document.getElementById("input1"); 

var div = document.getElementById("div1");

var button = document.getElementById("button1");

function inputShow(){ 

var input=document.getElementById("input1"); 

var div = document.getElementById("div1");

var button = document.getElementById("button1");

input.style.display="block";

button.style.display="block";

div.style.display="none";

input.value = div.innerHTML;

} 

function change(){

var input=document.getElementById("input1"); 

var div = document.getElementById("div1");

var button = document.getElementById("button1");

input.style.display="none";

button.style.display="none";

div.style.display="block";

div.innerHTML = input.value;	

}

</script> 

<body> 

 <div>

    <div onclick="txtReplick" id="div1" onmousedown="inputShow();">第一条测试</div>

    <div onclick="txtReplick">第二条测试</div>

    <div onclick="txtReplick">第三条测试</div>

</div>

 <input name="" id="input1" type="text" value="" style="display:none" /> 

 <input type="button" id="button1" value="修改" onclick="change()" style="display:none"/>

</body> 

</html>

bennman 2012-03-14

打赏
举报



<div>

    <div onclick="txtReplick(this)" flag="off">第一条测试</div>

    <div onclick="txtReplick(this)" flag="off">第二条测试</div>

    <div onclick="txtReplick(this)" flag="off">第三条测试</div>

</div>

<script type="text/javascript">

	function txtReplick(el){

		var bool=el.getAttribute('flag');

		if(bool=='off'){

			el.setAttribute('flag','on')

			var tf=document.createElement('input');

			tf.type='text';

			tf.value=el.innerHTML;

			el.appendChild(tf);

			var btn=document.createElement('input');

			btn.type='button';

			btn.value='更改';

			el.appendChild(btn);

			btn.onclick=function(event){

				stopBubble(event);

				el.innerHTML=tf.value;

				el.setAttribute('flag','off');

				el=null;

			}

		}

	}

	function stopBubble(e){

		if(e && e.stopPropagation){

		e.stopPropagation();	//w3c

		}else window.event.cancelBubble=true; //IE

	}

</script>

001007009 2012-03-14

打赏
举报



<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="gb2312" />

		<title></title>

		<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />		

		<style>

			body {font-size:12px;}

		</style>		

	</head>

	<body>

		<div onclick="txtReplick">第一条测试</div>

		<div onclick="txtReplick">第二条测试</div>

		<div onclick="txtReplick">第三条测试</div>

		<script>

			function $(el){

				return typeof el == 'string' ? document.getElementById(el) : el;

			}

			function $t(name, cot){

				cot = cot || document;

				return cot.getElementsByTagName(name);

			}

			var divs = $t('div');

			for(var i=0, len=divs.length; i<len; i++){

				divs[i].onclick = function(){

					if( $t('input', this).length ) return ;

					var c = document.createElement('div');

					c.innerHTML = '<input value="'+this.innerHTML+'" /><button>修改</button>';

					this.appendChild(c);

					var that = this;

					$t('button', this)[0].onclick = function(e){

						that.innerHTML = $t('input', that)[0].value;

						e = e || window.event;

						if (e.stopPropagation) {

							e.stopPropagation();

						} else {

							e.cancelBubble = true;

						}

					}

				}

			}

		</script>

	</body>

</html>