首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

看看这个应该怎么做,进来看看吧

2012-04-05 
看看这个应该如何做,进来看看吧HTML codedivdiv onclicktxtReplick第一条测试/divdiv onclick

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

HTML code
<div>    <div onclick="txtReplick">第一条测试</div>    <div onclick="txtReplick">第二条测试</div>    <div onclick="txtReplick">第三条测试</div></div>




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

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

[解决办法]
HTML code
<!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>
[解决办法]
HTML code
<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> 

热点排行