急求..js动态往td标签中添加标签的问题!!!

Question

先贴上关键代码
    初始化代码：
    var newtr=document.createElement("tr")
    var newtd=document.createElement("td")
    newtd.id="ok"
    newtd.innerHTML="hello world"
    newtr.appendChild(newtd)
    运行后通过js：
document.getElementById("ok").innerHTML='<input type="text" id="reName" value="'+"myText"+'" />' 
       这样无法把id为“reName”的文本域覆盖到td原来的位置！！！
      而如果修改的是字符串如：
        document.getElementById("ok").innerHTML='input type="text" id="reName" value="'+"myText"+'"'
       则可以正确的在td原来的位置把值奇幻为新的字符串文本急求js高手指点..........!!!!!

Answer 1

document.getElementById("ok").parentNode.innerHTML='<input type="text" id="reName" value="'+"myText"+'" />'

Answer 2

不好意思 上面我只贴出了部分代码，其实那个tr里面还有其他的td，所以楼上的哥们这方法不行，不好意思

Answer 3

<table><tbody id="t"></tbody></table>
<script>
var newtr=document.createElement("tr")
  var newtd=document.createElement("td")
  newtd.id="ok"
  newtd.innerHTML="hello world"
  newtr.appendChild(newtd)
  document.getElementById('t').appendChild(newtr);
  document.getElementById("ok").innerHTML='<input type="text" id="reName" value="'+"myText"+'" />';
</script>我测试了下 没问题啊

Answer 4

var input =document.createElement("input ");
input.type="text";
input.id="reName";
input.value=myText;newtd.appendChild(input);

Answer 5

  <table><tbody id="t"></tbody></table>
<script>
var newtr=document.createElement("tr")
  var newtd=document.createElement("td")
  newtd.id="ok"
  newtd.innerHTML="hello world"
  newtr.appendChild(newtd)
  document.getElementById('t').appendChild(newtr);
  document.getElementById("ok").innerHTML='<input type="text" id="reName" value="'+"myText"+'" />';
</script>
 测过 没问题 楼主是不是想在tr里放入input 而不是在td里放入啊 并且现在tr里还有其他的td 你不想将其他的td覆盖掉？那就在新创建一个input的节点 然后把它放在最后一个td的后面

Answer 6

感谢上面几位的回答
我的意思就是
tr它有几个td 我想把其中的一个td的内容换为一个 文本域标签

Answer 7

楼主你是不是这tr里的td的id都是ok啊要不肯定没问题的

Answer 8

 tr.appendChild(newtd0);
 tr.appendChild(newtd1);
 tr.appendChild(newtd2);
 tr.appendChild(newtd3);
如上所示：比如 newtd1.innerHTML="hello"
我现在想 newtd1.innerHTML="<input id='input' type='text' class='choose' name='input'>"
出现的问题是 newtd1原来显示内容的地方 并没有出现我想要的 文本域 ，文本域跑到别的地方去了
如果这样的话 newtd1.innerHTML=“新的值”  newtd1原来显示内容的地方就可以正确的显示出 :
新的值请问这是怎么回事？4#的大哥说的好像不是我想要的

Answer 9

newtd1.innerHTML="<input id='input' type='text' class='choose' name='input'>"
你如果这样的话，
tr.appendChild还得在执行一下这个得把它重新加在tr里，才能看到效果

Answer 10

哎呀真没说清楚！非常不好意思我的意思是：不是往tr里放入input 而是在tr里面的一个td里放入input的文本域

Answer 11

看我这个例子~·
<table><tbody id="t"></tbody></table>
<input type="button" value="改变td" id="btn" />
<script>
var newtr=document.createElement("tr")
  var newtd=document.createElement("td")
  newtd.id="ok"
  newtd.innerHTML="hello world"
  newtr.appendChild(newtd)
  document.getElementById('t').appendChild(newtr);
  
  document.getElementById('btn').onclick = function(){
  newtd.innerHTML = '<input type="text" id="reName" value="'+"myText"+'" />';
  document.getElementById('t').replaceChild(newtd,newtd);
  };
</script>

Answer 12

var myFiles=new Array()//全局数组 用以保存childs
var recordID=new Array()
var newFileID=10000  //起始默认ID
var chooseFileIDvar bDownLoad=false
var bSelect=false
var bUpLoad=false
var bBackUp=false
var bChange=false
var bDelete=false
var Tree=new function(){
this.FolderType="folder"
this.itemType="file"
this.itemMark = "."
this.closeMark="+"
this.openMark="-"



this.init=function(){
var _Note=document.getElementById("menu")
var note=document.createElement("div")
note.id="0"
note.name="根目录"
note.innerHTML=this.createInnerHtml(note.id,this.FolderType,note.name)

_Note.appendChild(note)

}

this.backDir=function(){
if(recordID.length<2){
return
}
else {
this.getChild(recordID[recordID.length-2])
recordID.length=recordID.length-1
}
}

//应该在这里把目录记下来 以便返回前进操作
this.getChild=function(_ParentID){
//alert(_ParentID)
//不记录重复的ID
for(i=0;i<recordID.length;i++){
if(recordID[i]!=_ParentID){
if(i==recordID.length-1){
recordID[recordID.length]=_ParentID
}
}
else {
break
}
}
if(recordID.length==0){
recordID[0]=_ParentID
}

var childBox=document.getElementById(_ParentID+"cBox")
if(childBox){
//来到这里是为了唤醒前面已经创造出来的div
 var isHidden=(childBox.style.display=="none")
 if(isHidden){
childBox.style.display="block"
//如果用document.getElementById("fileShow").innerHTML的话，只是把后面的值付给div，用appendChild的话就有子节点的意思了
 document.getElementById("fileShow").appendChild(myFiles[_ParentID+"cBox"+"f"])
 }else {
//alert(myFiles[_ParentID+"cBox"+"f"])
 childBox.style.display="none"
 document.getElementById("fileShow").appendChild(myFiles[_ParentID+"cBox"+"f"])
 } //依据点击的id来调出相对应的保存在全局变量中的div内容

 var _parentN_Mark = document.getElementById(_ParentID).firstChild
 _parentN_Mark.innerHTML =isHidden? this.openMark : this.closeMark 
}
else {
this.operateXML(_ParentID)
}
}

this.operateXML=function(data){

var xmlHttp=this.createXmlHttp()
xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4&&xmlHttp.status==200){
Tree.addChild(data,xmlHttp.responseText)
}
}
xmlHttp.open("get","http://127.0.0.1:8080/myWeb/tree.jsp?data="+data+"&random="+Math.random(),true)
xmlHttp.send(null)
}

this.createXmlHttp=function(){
var xmlHttp=null
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest()
}
else {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return xmlHttp
}

this.addChild=function(_ParentID,_Data){

var _Files=document.getElementById("fileShow")
var filesBox=document.createElement("table")
filesBox.id=_ParentID+"cBox"+"f"
//filesBox.className="fbox"
filesBox.setAttribute("width","100%")
//filesBox.style.backgroundColor="#55DFFF"
//filesBox.setAttribute("border","2px")
//alert(filesBox.className)
//alert(filesBox.style.width)
//var fileBox=document.createElement("div")
//fileBox.id=_ParentID+"cBox"+"f"
//fileBox.className="fbox"
//下面2句在于产生新的child时清除div布局新的内容的显示
_Files.innerHTML=""
_Files.appendChild(filesBox)

var PNote=document.getElementById(_ParentID)
var PNote_Mark=document.getElementById(_ParentID).firstChild  //不知道为什么 没第二句不行
PNote_Mark.innerHTML=this.openMark

var noteBox=document.createElement("div")
noteBox.id=_ParentID+"cBox"
noteBox.className="box"
PNote.appendChild(noteBox)

/***************Text形式********************/
var dataList=_Data.split("#")
var _child=null
var _childType=null for(i=0;i<dataList.length-1;i++){  
var one=dataList[i].split("&")
            item_id = one[0].substring(one[0].indexOf("=")+1,one[0].length)
item_isFolder = one[1].substring(one[1].indexOf("=")+1,one[1].length)
item_name = one[2].substring(one[2].indexOf("=")+1,one[2].length)

_node=document.createElement("div")
_node.id=item_id
//alert(_node.id.substring(1,_node.id.length))
_childType=item_isFolder=="true"?this.FolderType : this.itemType
_node.innerHTML=this.createInnerHtml(_node.id,_childType,item_name)
//alert(_node.innerHTML)
          noteBox.appendChild(_node)
   
fileTR=document.createElement("tr")
fileTR.setAttribute("width","100%")
fileTR.setAttribute("height","auto")
filesBox.style.backgroundColor="#C0DCC0"
fileTR.id=item_id 

//fileTR.innerHTML=this.createFileInnerHtml(fileTR,fileTR.id,_childType,item_name)
//alert(fileTR.innerHTML)
//直接返回一个tr
//alert(this.createFileInnerHtml(fileTR,fileTR.id,_childType,item_name))
filesBox.appendChild(this.createFileInnerHtml(fileTR,fileTR.id,_childType,item_name))


/*//在每个记录后插入已分隔线
x=document.createElement("hr")
x.style.width="100%"
x.style.height="1px"
fileBox.appendChild(x)
*/
}
myFiles[filesBox.id]=filesBox

}

Answer 13

//右边文件显示的内容
this.createFileInnerHtml=function(tr,id,type,name){

 if(type == this.itemType){
  var newtd0=document.createElement("td");
  var newtd1=document.createElement("td");
  var newtd2=document.createElement("td");
  var newtd3=document.createElement("td");
  var newtd4=document.createElement("td");
  var newtd5=document.createElement("td");
  newtd0.innerHTML="<input id='input' type='checkbox' class='choose' name='input'>"
  newtd0.style.width="auto"
  newtd1.innerHTML= this.itemMark
  newtd1.style.width="auto"
  newtd1.className="itemMark"   
  newtd2.innerHTML=name
  newtd2.style.width="auto"
  newtd2.id="file"  
  newtd3.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;123456KB"
  newtd3.style.width="auto"
  newtd4.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doc文档"
  newtd4.style.width="auto"
  newtd5.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2011-08-05"
  newtd5.style.width="auto"
  
  tr.appendChild(newtd0);
  tr.appendChild(newtd1);
  tr.appendChild(newtd2);
  tr.appendChild(newtd3);
  tr.appendChild(newtd4);
  tr.appendChild(newtd5);
  return tr 
 }
// return "<td>"+"<input id='input' type='checkbox' class='choose' name='input'>" +"</td>"+
//   "<td class=itemMark>"+ this.itemMark+"</td>" + 
           //          "<td id=file"+" class=item"+" onclick=Tree.clickItem("+id+")>"+name+"</td>"+
// "<td>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;123456KB"+"</td>"+
// "<td>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doc文档"+"</td>"+
// "<td>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2011-08-05"+"</td>"
 

if(type == this.FolderType){ //加个span就可以用innerHTML了,否则只用<td>包围的文本，取其值只能用nodeValue
  var newtd0=document.createElement("td");
  var newtd1=document.createElement("td");
  var newtd2=document.createElement("td");
  var newtd3=document.createElement("td");
  var newtd4=document.createElement("td");
  var newtd5=document.createElement("td");
  newtd0.innerHTML="<input id='input' type='checkbox' class='choose' name='input'>"
  newtd0.id="0"
  newtd0.style.width="auto"
  newtd1.innerHTML= this.closeMark
  newtd1.id="1"
  newtd1.style.width="auto"
  newtd1.className="folderMark"   
  newtd2.innerHTML=name
  newtd2.style.width="auto"
  newtd2.id="folder"  
  newtd3.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;123456KB"
  newtd3.id="3"
  newtd3.style.width="auto"
  newtd4.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doc文档"
  newtd4.id="4"
  newtd4.style.width="auto"
  newtd5.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2011-08-05"
  newtd5.id="5"
  newtd5.style.width="auto"

  tr.appendChild(newtd0);
  tr.appendChild(newtd1);
  tr.appendChild(newtd2);
  tr.appendChild(newtd3);
  tr.appendChild(newtd4);
  tr.appendChild(newtd5);
  
      return tr 
}
//return  "<td><input id='input' type='checkbox' class='choose' name='input'> </td>"+
//   "<td>"+this.closeMark+"</td>"+
// "<td id=ok>"+name+"</td>" + 
// "<td>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;123456KB"+"</td>"+
// "<td>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;doc文档"+"</td>"+
// "<td>"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2011-08-05"+"</td>"


}
// class=folder"+" onclick=Tree.getChild("+id+")
this.clickItem=function(fileID){
alert("这是点击文件的处理,文件ID为："+fileID)
}

//全选
this.chooseAll=function(){
var check=document.getElementById("fileShow").firstChild.childNodes
for(i=0;i<check.length;i++){
if(document.getElementById("all").checked){
check[i].firstChild.checked=true
}else {
check[i].firstChild.checked=false
}
}
//选择了文件就使得一些不可选择的功能成为可用
if(document.getElementById("all").checked){
showHidediv()
}else {
loadInit()
}
}

//上传文件
this.upload=function(){//文件选择对话框会自动选择上次的目录
 var inputObj=document.createElement('input')
         inputObj.setAttribute('id','_ef');
         inputObj.setAttribute('type','file');
         inputObj.setAttribute("style",'visibility:hidden');
 document.body.appendChild(inputObj);
         inputObj.click();  

 var file=inputObj.value  //返回选择的文件路径
//this.operateXML("501|"+file)
/* var div = document.createElement("div");
 var f = document.createElement("input");
 f.setAttribute("type", "file")
 f.setAttribute("name", "File")
 f.setAttribute("size", "50")
 f.click();
/* div.appendChild(f)
 var d = document.createElement("input");
 d.setAttribute("type", "button")
 d.setAttribute("onclick", "deteFile(this)");
 d.setAttribute("value", "Delete")
 div.appendChild(d)
 */ //window.opener.location.reload();//刷新父窗口中的网页)
//  newWin=window.open('c:\\','','fullscreen=1,scrollbars=0');      
   //   window.opener=null;//出掉关闭时候的提示窗口
   //   window.open('','_self'); //ie7      
  //    window.close();
  
}

//删除文件
this.deleteFiles=function(){
var div=document.getElementById("fileShow")
var check=div.firstChild.childNodes
for(i=0;i<check.length;i++){
//alert(div.firstChild.childNodes.length)
if(check[i].firstChild.checked){
//alert("delete succeed...")
check[i].parentNode.removeChild(check[i])
check=div.firstChild.childNodes
i--
}

}
if(check.length==0){
document.getElementById("all").checked=false
}

}

//新建文件夹
this.newFiles=function(){
_nodeNew=document.createElement("tr")
_nodeNew.style.width="100%"
_nodeNew.style.height="auto"
_nodeNew.id=newFileID
_nodeNew.innerHTML=this.createFileInnerHtml(_nodeNew.id,this.FolderType,"新建文件夹")

var div=document.getElementById("fileShow")
div.firstChild.appendChild(_nodeNew)
newFileID++  //连接数据库后另设ID模式
}

//重命名
this.changeName=function(){
var div=document.getElementById("fileShow")
var check=div.firstChild.childNodes
//alert(check.length)
//alert(check[0].childNodes[0].firstChild)
// alert(check[0].childNodes[3])
    //这里暂时固定了一个id
//var n=document.getElementById("fold")
//var text=n.innerHTML
//if (window.attachEvent){
// alert(document.getElementById(_nodeC.id))
// _nodeC.attachEvent("onclick", this.nodeClick(_nodeC.id))

//}
//else {
// _nodeC.addEventListener("click", this.nodeClick(_nodeC.id))
//}
for(i=0;i<check.length;i++){
//alert(check[i].childNodes[0].checked)
if(check[i].childNodes[0].firstChild.checked){
//alert(check[i].childNodes[2].innerHTML)
var td=check[i].childNodes[2]
//var next_td=check[i].childNodes[3]
var myText=td.innerHTML
//alert(td.style.width)
chooseFileID=td.id


//替换为文本域
var obj=document.createElement("input")
obj.id="reName"
obj.name="reName"
obj.type="text"
obj.style.backgroundColor="#9E6"
obj.value=myText

if (obj.attachEvent){
obj.attachEvent('onblur', this.reNameOk);
//alert("h")
}
else if (obj.addEventListener){
obj.addEventListener('blur', this.reNameOk, false);
alert("l")
}
//td.parentNode.removeChild(td)
//var newtd = document.createElement("td")
//newtd.innerHTML="input id='reName' type='text' name='reName'"
//next_td.parentNode.insertBefore(newtd,next_td)

//alert(chooseFileID)
//document.getElementById(chooseFileID).parentNode.innerHTML='<input type="text" id="reName" value="'+myText+'" />' 
//td.parentNode.removeChild(td)

td.innerHTML=""
td.appendChild(obj)
check[i].appendChild(td)
//alert(td.childNodes[1])
//alert(td.innerText)
document.getElementById("reName").select()
//document.getElementById("reName").focus();
//obj.onchange=this.reNameOk()
//obj.onkeyup=Tree.keyEvent(event)

//alert("d")
//"<input"+" type='text'"+" id='mm'"+" value=text"+" />" 
//" value="+text+" onkeyup=Tree.keyEvent(e)"+" onblur=Tree.reNameOk("+td+")"+
//check[i].childNodes[2].innerHTML="hello wo "
//alert("aefdef")
  //alert(text)
//check[i].childNodes[2].innerHTML="hello"
// alert(td.innerHTML)

//alert(chooseFileID)
/*
var text=document.getElementById(chooseFileID).innerHTML
var td=document.getElementById(chooseFileID)
var textID="reName"
alert(td.innerHTML)
td.innerText="<input"+" type='text'"+" id="+textID+" value="+text+" >" 
alert("r")
alert(document.getElementById(textID))
*/

//alert(document.getElementById(chooseFileID).innerHTML)
}

}

}

this.reNameOk=function(){
//alert(document.getElementById(chooseFileID))
//alert(document.getElementById("reName").value)
alert("dd")
document.getElementById(chooseFileID).innerText=document.getElementById("reName").value
}

this.keyEvent=function(e){
 // alert("mm")
 if (navigator.appName == "Microsoft Internet Explorer"){
 if(event.keyCode==13){

this.reNameOk()  
}
       }else {
           var keycode = e.which;
   if(keycode==13){
this.reNameOk()     
   }
       }
}
}

Answer 14

问题解决了！ 原来是我的td的id和一个div的重名了！！！
解决了这就可以正确显示了，也不用重新执行感谢上面的几位热心的回答，尤其是 
MuBeiBei
(__木北北__ 不給糖就翻臉!)many thanks