请帮忙看一下问题在哪里?谢谢!

想要实现如下效果:
选中checkbox "fwhtz",则将<input>替换为<select>,再点一下,再将<select>替换为<input>
问题是:
选中checkbox "fwhtz",则将<input>替换为<select>没问题,可是再点一下,再将<select>替换为<input>时,<select>没有删除,结果又有<select>,又有<input>.
我用的是删除子节点的方法,没用innerHTML=""这个方法来处理.
代码如下
<html>
<head>
<Script type="text/JavaScript">
function processFwhtz(){
if(document.forms(0).fwhtz.checked){
var tdJg=document.getElementById("tdJg");
var ch=tdJg.childNodes;
var i;
for(i=0;i<ch.length;i++){
//alert(ch[i].outerHTML);
ch[i].removeNode(true);
}
var selJgNode=document.createElement("<select name=jgdm>");
selJgNode.options[0]=new Option("0","0");
selJgNode.options[1]=new Option("1","1");
selJgNode.options[2]=new Option("2","2");
tdJg.appendChild(selJgNode);
var inputJgdm=document.createElement("<input type=hidden name=jgmc>");
tdJg.appendChild(inputJgdm);
//alert(tdJg.outerHTML);
}else{
var tdJg=document.getElementById("tdJg");
//alert("1:"+tdJg.outerHTML);
var ch1=tdJg.childNodes;
var i;
for(i=0;i<ch1.length;i++){
//alert(ch1[i].outerHTML);
//alert(ch1[i].nodeName+":"+ch1[i].nodeType+":"+ch1.nodeValue);
//ch1[i].removeNode(true);
tdJg.removeChild(ch1[i]);
}
var inputJgdm=document.createElement("<input type=hidden name=jgdm>");
tdJg.appendChild(inputJgdm);
var inputJg=document.createElement("<input type=text name=jgmc>");
inputJg.setAttribute("size","20");
tdJg.appendChild(inputJg);
//alert(tdJg.outerHTML);
}
}
</script>
</head>
<body>
<body >
<form >
  <table  id="table1">
   <tr>
   <td colspan="2">
   <input type="checkbox" name="fwhtz" onclick="processFwhtz();">fwhtz
   </td>
   </tr>
    <tr>
      <td class="labelCell" >
        请选择
     </td>
      <td  class="editCell" id="tdJg" >
       <input type="hidden" name="jgdm" >
       <input type="text" name="jgmc" size="22" readonly >
      </td>
    </tr>
  </table>
 </form>
 </body>
 </html>

解决方案 »

  1.   


    我改了一下：<html>
    <head>
    <Script type="text/JavaScript">
    function processFwhtz(){
    if(document.forms(0).fwhtz.checked){
    var tdJg=document.getElementById("tdJg");
    var ch=tdJg.childNodes;
    var i;
    for(i=0;i<ch.length;i++){
    //alert(ch[i].outerHTML);
    ch[i].removeNode(true);
    }
    var selJgNode=document.createElement("<select id='abc' name=jgdm>");
    selJgNode.options[0]=new Option("0","0");
    selJgNode.options[1]=new Option("1","1");
    selJgNode.options[2]=new Option("2","2");
    tdJg.appendChild(selJgNode);
    var inputJgdm=document.createElement("<input type=hidden name=jgmc>");
    tdJg.appendChild(inputJgdm);
    //alert(tdJg.outerHTML);
    }else{
    document.getElementById("abc").style.display="none";
    var tdJg=document.getElementById("tdJg");
    //alert("1:"+tdJg.outerHTML);
    var ch1=tdJg.childNodes;
    var i;
    for(i=0;i<ch1.length;i++){
    //alert(ch1[i].outerHTML);
    //alert(ch1[i].nodeName+":"+ch1[i].nodeType+":"+ch1.nodeValue);
    //ch1[i].removeNode(true);
    tdJg.removeChild(ch1[i]);
    }
    var inputJgdm=document.createElement("<input type=hidden name=jgdm>");
    tdJg.appendChild(inputJgdm);
    var inputJg=document.createElement("<input type=text name=jgmc>");
    inputJg.setAttribute("size","20");
    tdJg.appendChild(inputJg);
    //alert(tdJg.outerHTML);
    }
    }
    </script>
    </head>
    <body>
    <body >
    <form >
      <table id="table1">
      <tr>
      <td colspan="2">
      <input type="checkbox" name="fwhtz" onClick="processFwhtz();">fwhtz
      </td>
      </tr>
      <tr>
      <td class="labelCell" >
      请选择
      </td>
      <td class="editCell" id="tdJg" >
      <input type="hidden" name="jgdm" >
      <input type="text" name="jgmc" size="22" readonly >
      </td>
      </tr>
      </table>
     </form>
     </body>
     </html>
      

  2.   

    haiyong_sea大哥,
    你好象只是加了一句
    document.getElementById("abc").style.display="none";
    你只是不显示那个select,而没有删除这个子节点,
    那为什么我的程序执行不正确呢?
      

  3.   

    你可以做两个DIV一个放text，一个放select，当你勾时显示select，不勾就是text
      

  4.   

    你的两个循环有问题，因为你在循环里删除了子节点，所以tdJg的子节点个数就减少了，也就是ch1.length的长度就减少了，而你的i是加1的，所以就会出现ch[i]取不到所有的子节点。
    如果要用循环可以改成这样
    for(i=ch.length-1;i>=0;i--){
    //alert(ch[i].outerHTML);
    ch[i].removeNode(true);
    }
      

  5.   

    报告楼主，用jQuery的 toggle方法很容易实现你要的。
      

  6.   

    <script type="text/javascript">
    function choose(obj) {
    var oRoot = document.getElementById("sel_inp");
    var oInp = document.getElementById("oInpId");
    var oSel = document.getElementById("oSelId");
    if (obj.checked) {
    clear(oRoot, oSel);
    creatInput(oRoot);
    } else {
    clear(oRoot, oInp);
    createSelect(oRoot);
    }
    }
    function clear(oRoot, oldChild) {
    if (oldChild != null)
    oRoot.removeChild(oldChild);
    }
    function creatInput(oRoot) {
    var oInp = document.createElement("input");
    oInp.setAttribute("id", "oInpId");
    oInp.setAttribute("type", "text");
    oInp.setAttribute("name", "sInput");
    oRoot.appendChild(oInp);
    }
    function createSelect(oRoot) {
    var oSel = document.createElement("select");
    oSel.setAttribute("id", "oSelId");
    oSel.options[0] = new Option("0", "0");
    oSel.options[1] = new Option("1", "1");
    oSel.options[2] = new Option("2", "2");
    oRoot.appendChild(oSel);
    }
    </script>请选择<input type="checkbox" name="ckb" onclick ="choose(this);">
    <div id="sel_inp"></div>
      

  7.   

    也可以使用oRoot.replaceChild(newChild, oldChild)。可以自己尝试下