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

usa112233 2010-04-02 05:26:01
想要实现如下效果:
选中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>
...全文
148 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
usa112233 2010-04-06
  • 打赏
  • 举报
 回复
可我也想学习一下,知道问题出在什么地方,
oxcow 2010-04-06
  • 打赏
  • 举报
 回复
也可以使用
oRoot.replaceChild(newChild, oldChild)
。可以自己尝试下
oxcow 2010-04-06
  • 打赏
  • 举报
 回复 
<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>
haisenmai 2010-04-06
  • 打赏
  • 举报
 回复
报告楼主，用jQuery的 toggle方法很容易实现你要的。
wwq0123 2010-04-06
  • 打赏
  • 举报
 回复
你的两个循环有问题，因为你在循环里删除了子节点，所以tdJg的子节点个数就减少了，也就是ch1.length的长度就减少了，而你的i是加1的，所以就会出现ch[i]取不到所有的子节点。
如果要用循环可以改成这样
for(i=ch.length-1;i>=0;i--){
//alert(ch[i].outerHTML);
ch[i].removeNode(true);
}

appleman3617 2010-04-06
  • 打赏
  • 举报
 回复
你的select没有隐藏掉~~~
appleman3617 2010-04-06
  • 打赏
  • 举报
 回复
你可以做两个DIV一个放text，一个放select，当你勾时显示select，不勾就是text
真哥哥 2010-04-02
  • 打赏
  • 举报
 回复
你要的不就是那效果吗
usa112233 2010-04-02
  • 打赏
  • 举报
 回复
haiyong_sea大哥,
你好象只是加了一句
document.getElementById("abc").style.display="none";
你只是不显示那个select,而没有删除这个子节点,
那为什么我的程序执行不正确呢?
真哥哥 2010-04-02
  • 打赏
  • 举报
 回复

我改了一下：

<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>
Dynatrace与人工智能运维核心解析实践
当前自动化的人工智能运维方式也变得至关重要，这种运维方式可以帮忙IT运维人员在成千上万的跨域数据节点中，自动判断应用性能状态，以及自动定位应用性能问题的根源，这种突破性的运维方式重新定义了应用性能监控...
IMP0003同00019问题？！！！
帮忙看下，谢谢！ Column 2 USER FLAVOR FUNCTION IMP-00019: row rejected due to ORACLE error 1 IMP-00003: ORACLE error ...
局网内有台机器主机怎没都找不到，但那机器可以上网？这是什么问题呢？？请大家帮帮忙！！谢谢！
局网内有台机器主机怎没都找不到，但那机器可以上网？这是什么问题呢？？请大家帮帮忙！！谢谢！
C++中可排列相等请朋友举个列子帮忙解释一下？？？？
请朋友们帮忙解释一下 “可排列相等”问题？？？？在c++中实现的。。。。。。   谢谢！！！！
linux服务器半夜断网,再问：Linux服务器频繁断网的问题，请诸位帮手解决，谢谢！？...
再问：Linux服务器频繁断网的问题，请诸位帮手解决，谢谢！？(2012-01-02 23:12:23)标签：服务器linux杂谈再问：Linux服务器频繁断网的问题，请诸位帮手解决，谢谢！？ 本帖最后由 gnubuntu 于 2010-12-08 15:30编辑之所以“再问”，是因为这个问题困扰我已久，已发帖到处求医而不得治。不过，最近有了一些尝试，所以，这里发主题再问各位。是这样，我的两台服务...
JavaScript

87,920

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章