（高分相赠！！）鼠标点击一个td，td马上变成一个下拉框，下拉框选中td当前的值（下拉框的内容是已知的）...(内详！)

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function editCellSelect(cell) {    
if (document.all) {
cell.innerHTML = '<SELECT ID=editCellSelect ONCLICK="event.cancelBubble = true;" ONBLUR="setCell(this.parentElement,this.value);"><OPTION value=gggggggggggggggggg>gggggggggggggggggg</OPTION><OPTION  value=ffffffffffff>ffffffffffff</OPTION></SELECT>';

document.all.editCellSelect.focus();
document.all.editCellSelect.select();
}
}
function setCell (cell, value) {
    if (document.all){
        //处理换行     
cell.innerText = value;}
else if (document.getElementById)
    alert("bb");
cell.replaceChild(document.createTextNode(value), cell.firstChild);
}
</SCRIPT>
</head>
<body bgcolor="#ffffff" text="#000000">
<table border="0" cellspacing="1" cellpadding="1">
<tr>
<td height="25">客 户：</td>
<td ONCLICK="editCellSelect(this);" width="200">click</td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    <BODY onclick="hide()">
    <TABLE onclick="show()">
    <TR>
    <TD>test1</TD><TD>test2</TD><TD>test3</TD><TD>test4</TD>
    </TR>
    </TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var st = "<select><option>test1</option><option>test2</option><option>test3</option><option>test4</option></select>";
    function show(){
    if (event.srcElement.tagName!="TD") return;
    hide();
    var elm = event.srcElement;
    var st1 = "<option>"+elm.innerText+"</option>";
    var st2 = "<option selected>"+elm.innerText+"</option>";
    elm.innerHTML = st.replace(st1,st2);
    event.cancelBubble=true;
    }
    function hide(){
    if (event.srcElement.tagName=="SELECT") {return};
    var elms = document.getElementsByTagName("SELECT");
    for (var i=elms.length-1;i>=0;i--)
    elms[i].parentNode.innerHTML = elms[i].options[elms[i].selectedIndex].text;
    }
    //-->
    </SCRIPT>
    </BODY>
      

  2.   

    http://www.csdn.net/Develop/My_Article.asp?author=net_lover
      

  3.   

    来个简单的
    <TABLE borderColor=#ffffff cellSpacing=1 cellPadding=1 width="98%" 
                bgColor=#00659c border=1>
      <TBODY>
        <TR borderColor=#007db5 bgColor=#007db5> 
          <TD onclick="document.all.td_01.style.display=document.all.td_01.style.display=='none'?'':'none';return false;">点击此处</TD>
        </TR>
        <TR id=td_01 style="DISPLAY: none" borderColor=#ffffff 
                  bgColor=#ffffff> 
          <TD align=middle> <TABLE width="96%" border=0>
              <TBODY>
                <TR vAlign=top> 
                  <TD width="49%">怎么样，这个简单方便吧：）
                   </TD>
                </TR>
              </TBODY>
            </TABLE></TD>
        </TR>
      </TBODY>
    </TABLE>
      

  4.   

    <div id=div1 style="display:none">
    <select>
    <option value=1>1
    <option value=2>2
    <option value=3>3
    <option value=4>4
    <option value=5>5
    </select>
    </div>
    <table id=ddd border=1 onclick="clk()">
      <tr>
        <td width=100>1</td>
        <td width=100>2</td>
        <td width=100>3</td>
        <td width=100>4</td>
        <td width=100>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>
    <script language="javascript">
    function clk(){
      if(event.srcElement.tagName!="TD") return;
      var t = event.srcElement.innerHTML;
      event.srcElement.innerHTML = div1.innerHTML;
      event.srcElement.children[0].value = t
    event.srcElement.children[0].style.width = "100%"
    }
    </script>