<div id="myList">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>假设我有上面一个div  我需要右击弹出一个菜单  修改 li 便签之间的值  请问我该如何操作 右键 点击弹出一个菜单我已经实现 就不不晓得如何  修改值 请给位指教

解决方案 »

  1.   

    点击 时可以动态生成一个input,其value就是li的innerHTML,确定修改时,让li的innerHTML改变成input修改后的value即可
      

  2.   

    仅供参考:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Dom-table</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="../css/editTable.css" />
    <script languag="javascript">
    function changeColorEven(){
    //alert("********");
    var tab = document.getElementsByTagName("tbody")[0]; //先将tbody对象取出
    var tabrow = tab.rows; //获取当前表格中行的集合
    for (var i=0; i<tabrow.length ; i++ )
    {
    if (i%2 == 0)
    {
    var tabrows = tabrow[i];
    tabrows.style.cssText = "background:#999999"; //将行数为偶数行的背景色改为灰色
    } //end if
    } //end for

    /*
    //获取每行每列的第一个td对象
    for (var a=1; a<tabrow.length ; a++)
    {
    var tabcell = tabrow[a].cells;
    var tabc = tabcell[0];
    //alert(tabc);
    var tabtd = tabc.firstChild;
    }
    */ var tmpArray = new Array(); //定义一个临时数组

    for (var i=0; i<tabrow.length ; i++ )
    {
    var tabcel = tabrow[i].all; //获取列数
    //alert(tabcel.length);
    for (var k=0; k<tabcel.length ; k++ )
    {
    var tabk = tabcel[k]; // 将列数集合给予tabk
    var cellObj = tabk.tagName; //获取每列的标签名
    //alert(cellObj.length);
    if (cellObj == "TD") //删选出标签为td的对象
    {
    //alert(cellObj);
    //alert(cellObj.length);
    if (k%2==0)
    {
    //alert(tabcel[k]);
    tmpArray.push(tabcel[k]); //将取出的每行第一列放入临时数组
    } //end if

    } //end if
    } //end for

    } //end for
    //alert(tmpArray); for (var j=0; j<tmpArray.length ; j++ )
    {
    tmpArray[j].attachEvent("onclick",setInput); //使单击td产生事件
    } //end for function setInput(eve){
    //alert("****");
    var tdsrc = eve.srcElement; //将单击的原对象赋予tdsrc
    var tdText = tdsrc.innerText; //将td内容存于变量tdText中,以便多次使用
    //alert(tdsrc);
    var tdput = document.createElement("input"); //创建input对象
    tdput.type = "text";
    tdput.id = "tdtxt";
    tdput.style.border = 0 ;
    tdput.style.width = "98%";
    tdput.style.fontSize = tdsrc.currentStyle.fontSize;
    tdput.style.backgroundColor = tdsrc.currentStyle.backgroundColor ; //将原有css样式赋给现有的input对象
    tdput.value = tdsrc.innerText; //将原对象值赋给新建的input.value中
    tdsrc.innerText = ""; tdsrc.insertAdjacentElement("afterBegin",tdput); //将创建的tdput-input对象放入原对象tdsrc中 tdput.select(); //选取密码域中的文本
    tdput.focus(); //获取输入框的焦点 tdput.attachEvent("onclick",stopEvent); //添加阻止事件
    tdput.attachEvent("onkeydown",returnValue); //添加改变输入值事件 function returnValue(e){
    var tdput = document.getElementById("tdtxt");
    var retValue = e.keyCode; //返回键盘值
    //alert(tdput.value);
    //alert(retValue);
    if (retValue == 13)
    {
    tdsrc.innerText = tdput.value;  //将输入的值赋给td
    }else if (retValue == 27)
    {
    tdput.value = tdText; //将原有的值赋给input的Value
    } //end if } //end fn } //end fn function stopEvent(e){
    e.cancelBubble = true; //阻止事件传播
    return false;
    } //end fn } //end fn function test(){
    changeColorEven();
    } //end f</script>
    </head>
    <body onload="test()">
    <table>
    <thead>
    <th colspan=2>可编辑的表格</th>
    </thead>
    <tbody>
    <tr>
    <th>学号</th>
    <th>姓名</th>
    </tr>
    <tr>
    <td>000001</td>
    <td>张三</td>
    </tr>
    <tr>
    <td>000002</td>
    <td>李四</td>
    </tr>
    <tr>
    <td>000003</td>
    <td>王五</td>
    </tr>
    <tr>
    <td>000004</td>
    <td>赵六</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
      

  3.   

    动态生成一个input   隐藏域吗 ?
      

  4.   

    既然要修改值 肯定是可见的input啊,才方便操作。
      

  5.   


    谢谢  你是说的这种方式 应该可以做到  但可见的input 会影响页面的效果隐藏域 可以修改 但没法显示 我现在要做的是   拖拽后产生的 <li></li>标签  然后右键弹出一个菜单栏 然后修改当前点击的<li></li>之间的文本值
      

  6.   

    楼主可以整理下你的demo ,贴出来,大家看看。
      

  7.   

    这是源码
    <!DOCTYPE html>
    <html  lang="zh-CN" >
    <head>
    <meta charset="UTF-8" />
    <title>NewSetting</title>
    <meta name="robots" content="ALL" >
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="style/admin.css" rel="stylesheet" type="text/css" />
            
    <script src="js/jquery.js"></script>
    <script src="js/jquery.dimensions.js"></script>
    <script src="js/ui/ui.mouse.js"></script>
    <script src="js/ui/ui.draggable.js"></script>
    <script src="js/ui/ui.draggable.ext.js"></script>
    <script src="js/ui/ui.droppable.js"></script>
    <script src="js/ui/ui.droppable.ext.js"></script>
    <script src="js/ui/ui.sortable.js"></script><script type="text/javascript" src="js/js.js"></script>
    </head>
    <script type="text/javascript">
    var elem = '';
    $(document).ready(function(){

    $('ul.tagli>li').draggable({
    helper: 'clone',
    opacity: 0.55,
    start:function(e, ui)
    {
    elem = e.srcElement || e.target;
    }
    });

    $(".box").droppable({
    accept: "li a",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
    var o = elem.title;
    var oid = elem.id;
    var sid = "s" + oid;

    //有相同的就不插入了。
    if ( document.getElementById(sid) == null)
    {
    $(this).append( "<ul><li title='"+o+"' id='"+sid+"'> "+o+" <a href='#' onclick='javascript:$(this.parentNode).remove();' title='删除此栏'> X</a></li></ul>" );

    }else  {

    alert ("您已经添加了相同FieidValue,请您删除后再添加,谢谢!"); } 

    }
    });

    $('ul.tagli>li').click(function(){
    $('#filter').append("<div class='box'><h4>by 频道 <a  align='right' href='#' onclick='javascript:$(this.parentNode).remove();' title='删除此栏'> X</a></h4></div>");


    $(".box").droppable({
    accept: "li a",
    activeClass: 'droppable-active',
    hoverClass: 'droppable-hover',
    drop: function(ev, ui) {
    var o = elem.title;
    var oid = elem.id;
    var sid = "s" + oid;
    //有相同的就不插入了。
    if ( document.getElementById(sid) == null)
    {
    $(this).append( "<ul><li title='"+o+"' id='"+sid+"'> "+o+" <a href='#' onclick='javascript:rem(this);' title='删除此栏'> X</a></li></ul>" );
    }else  {

    alert ("您已经添加了相同FieidValue,请您删除后再添加,谢谢!"); } 

    }
    });

    }); });

    //移除方法
    function rem(a){
    $(a.parentNode).remove();
    }
    </script>
    <body>
    <div id="header">
    <h1>MagicLayer  Administration</h1>
    <div id="rigbtn"><a href="#">浏览</a><a href="#"  class="current">新建</a><a href="#">修改密码</a><a href="#">退出</a></div>
    </div>
    <div id="content">
    <h2 class="pagetitle">NewSetting</h2>
    <div class="crumbs"><span  >1 基本设置</span><span class="current">2 Filter定制</span><span>3 Output定制</span><span>4 Finish</span></div><table width="100%" border="0" cellpadding="0" cellspacing="1" class="tab">
      <tr>
        <td><h3 class="tit01"><span><select name="">
          <option>公有云</option>
        </select></span>FieldName</h3>
    <ul class="tagli">
    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>
    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>
    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>

    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>
    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>
    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>
    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>
    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>
    <li title="频道1" id="1">频道1</li>
    <li title="频道2" id="2">频道2</li>
    <li title="频道3" id="3">频道3</li>
    <li title="频道4" id="4">频道4</li>
    <li title="频道5" id="5">频道5</li>
    <li title="频道6" id="6">频道6</li>
    <li title="频道7" id="7">播出时间</li>


    </ul> </td>
        <td><h3  class="tit01"><span><input name="" type="button" value="增加字段限制"></span>FieidValue</h3>
    <ul  class="tagli">
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    <li>CCTV1</li><li>JIEMU</li><li as_name="CCTV" as_id="1">频道</li><li>频道</li><li>天津卫视</li><li>播出时间</li>
    </ul> </td>
      </tr>
      <tr>
        <td colspan="2">
    <h3 class="tit01">filter制定</h3>
       <div class="scroll">
    <div id="filter" class="scrollcont">
    <div class="box"></div><div class="box">
    <h4>By Date</h4>
    <ul>
    <li>CCTV2</li>
    <li>CCTV2</li>
    <li>CCTV2</li>
    <li>CCTV2</li>
    </ul>
    </div>
    <div class="box">
    <h4>By 频道</h4>
    <ul>
    <li>CCTV2</li>
    <li>CCTV2</li>
    <li>CCTV2</li>
    <li>CCTV2</li>
    </ul>
    </div>
    </div>
    </div>
    </td>
        </tr>
    </table><div class="btnli"><input type="button" value="Previous" class="inp1"> 
    <input type="button" value="Next" class="inp2">
    </div></div>
    </body>
    </html>
      

  8.   

    你弹出菜单的demo是怎么实现的呢?
    如果是直接一个input那下面代码你可以试下。
    $(document).ready(function(){
        
       //给每个li添加单击事件
       $("#myList > ul > li").click(function(){
           //此处要根据你是如何弹出用户输入框的来定  我这临时建立一个input
           $("<input type='text' id='useInput'/>").foucs()
              .appendTo($(this));
      });  //当input失去焦点时获取输入值
      $("#useInput").blur(function(){
           var newText = $(this).val();
           $(this).parent("li").text(newText);
      })
    });//注:以上代码没有经过测试,不过具体思路就是这样
      

  9.   

    楼主真是菜的没法说了,你会不会jquery