小女子冰天雪地 100分 求教：动态生成div.InnerHtml出错，求指点

hinada99 2011-04-14 12:14:22
想实现的功能，简单地说，就是想在div.InnerHtml=（），括号里调用函数m_start和m_end，来生成菜单。
函数清单 和 样式 信息 都已经列出，经测试，能够使用。
问题是：
InitControlList（）是我写的函数，即在div.InnerHtml中调用菜单生成函数，但是报错。求指教，帮忙看看div.InnerHtml=“”后的字符串是否有错，或者是其他错误。


函数清单：
m_start(nodeName,nodeRank):菜单组开始


function m_start(name,tt)    //菜单组开始

{

  document.writeln('<tr><td class="bj">'+(tt==1?'1':'0')+'</td>');

//  document.writeln('<tr><td><img src="js/UniversePlan/folder.png" alt=""/></td>');

  document.writeln('<td><a href="#" onclick="zgmm()">'+name+'</a></td>');

  document.writeln('</tr>');

  document.writeln('<tr style="display: '+(tt==1?'block':'none')+';">');

  document.writeln('<td class="bj"> </td>');

  document.writeln('<td>');

  document.writeln('<table border="0" cellpadding="0" cellspacing="0">');

}

m_end()：菜单组结束


function m_end()    //菜单组结束

{

  document.writeln('</table></td></tr>');

}

zgmm():显示菜单的子菜单


function zgmm()

{

//当前发生事件的对象的父对象的上一个兄弟对象

  var ero = event.srcElement.parentElement.previousSibling;

//当前发生事件的对象的父对象的父对象的下一个兄弟对象

  var mo = event.srcElement.parentElement.parentElement.nextSibling;

  mo.style.display = (mo.style.display=="none")?"block":"none";

  ero.innerHTML = (mo.style.display=="none")?"0":"1";

}



使用到的样式


<style>

#A1 td { vertical-align: top; }

#A1 td.bj { font-family: Wingdings; color: #FF9933; text-align: center; }

#A1 td.bj , #A1 td.kg { width: 24; }

#A1 a:link , #A1 a: visited  { color: #cc0080; text-decoration: none; }

#A1 a:hover { color: #0ff080; text-decoration: none; }

</style>


想实现的功能


//xml文件名生成1级节点（只获取xml文件名）

function InitControlList()

{

    document.getElementById("tv_ControlPlan").innerHTML ="<table border='0' cellpadding='0' cellspacing='0' width='100%' id='A1'>";

    document.getElementById("tv_ControlPlan").innerHTML+="<script type ='text//javascript'>";

    document.getElementById("tv_ControlPlan").innerHTML+=m_start("计划1",1);

    document.getElementById("tv_ControlPlan").innerHTML+=m_end();

    document.getElementById("tv_ControlPlan").innerHTML+="<//script><//table>";

}
...全文
136 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
gnahshining 2011-04-14
  • 打赏
  • 举报
 回复
你还是分开写吧，alert一下，看看返回值取到的是不是你想要的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type ='text/javascript'>
function a(){
alert(2);
}
function InitControlList()
{
alert(1);
var append = "";
append += "<a href='javascript:a()'>aaa</a>";
alert(append);
document.getElementById("tv_ControlPlan").innerHTML=append;
}
</script>

</head>

<body>
<div id="tv_ControlPlan"></div>
<input type="button" onclick="InitControlList()" value="test">

</body>
</html>
阳明 to life 2011-04-14
  • 打赏
  • 举报
 回复
// ？？什么玩意
你想用\\吧
\是转义符
//就是//的意思 - -||
ypb137154098 2011-04-14
  • 打赏
  • 举报
 回复


这接调用试试：

function InitControlList()
{
document.getElementById("tv_ControlPlan").innerHTML ="<table border='0' cellpadding='0' cellspacing='0' width='100%' id='A1'>";
document.getElementById("tv_ControlPlan").innerHTML+="<//table>";
m_start("计划1",1);
m_end();

}
hinada99 2011-04-14
  • 打赏
  • 举报
 回复
在线等待大侠解答~~
hinada99 2011-04-14
  • 打赏
  • 举报
 回复
在线等待大侠解答~~
hinada99 2011-04-14
  • 打赏
  • 举报
 回复
解决了~~
谢谢大侠们的指教。
toury 2011-04-14
  • 打赏
  • 举报
 回复
哦，12楼有一处兼容代码没改过来：
alert(o.tagName)
alert(o.parentNode.nodeName)
debugger;
//取当前对象的父对象的前一个同级节点对象
var ero = o.parentNode.previousSibling;alert(ero);
//取当前对象的父对象的父对象的同级节点对象
var mo = o.parentNode.parentElement.nextSibling;alert(mo);
if(mo){mo.style.display = (mo.style.display=="none")?"block":"none";}
if(ero){ero.innerHTML = (mo.style.display=="none")?"0":"1";}
}

把红字的parentElement改为parentNode
toury 2011-04-14
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>



<style>

#A1 td { vertical-align: top; }

#A1 td.bj { font-family: Wingdings; color: #FF9933; text-align: center; }

#A1 td.bj , #A1 td.kg { width: 24; }

#A1 a:link , #A1 a: visited  { color: #cc0080; text-decoration: none; }

#A1 a:hover { color: #0ff080; text-decoration: none; }

</style>

<script>

function $(id){return document.getElementById(id)}

function InitControlList(){ 

  var sHTML='';

  sHTML+="<table border='0' cellpadding='0' cellspacing='0' width='100%' id='A1'>";

  //sHTML+="<script type ='text/javascript'>";

  sHTML+=m_start("计划1",1);

  sHTML+=m_end();

  // sHTML+="<//script></table>";

  sHTML+="</table>";

  $("tv_ControlPlan").innerHTML=sHTML;  

}



function zgmm(o){

alert(o.tagName)

alert(o.parentNode.nodeName)

debugger;

  //取当前对象的父对象的前一个同级节点对象

  var ero = o.parentNode.previousSibling;alert(ero);

  //取当前对象的父对象的父对象的同级节点对象

  var mo = o.parentNode.parentElement.nextSibling;alert(mo);

  if(mo){mo.style.display = (mo.style.display=="none")?"block":"none";}

  if(ero){ero.innerHTML = (mo.style.display=="none")?"0":"1";}

}



function m_start(name,tt){                  //菜单组开始

  var s=''

  s+='<tr>'

  s+='<td class="bj">'+(tt==1?'1':'0')+'</td>';

  //  document.writeln('<tr><td><img src="js/UniversePlan/folder.png" alt=""/></td>');

  s+='<td><a href="#" onclick="zgmm(this)">'+name+'</a></td>';

  s+='</tr>';

  s+='<tr style="display: '+(tt==1?'block':'none')+';">';

  s+='<td class="bj"> </td>';

  s+='<td>';

  s+='<table border="0" cellpadding="0" cellspacing="0">';

  return s;

}



function m_end(){ return '</table></td></tr>'; }  //菜单组结束 



window.onload=function(){  InitControlList()  }



</script>

<body>

<div id=tv_ControlPlan>



</div>

</body>

</html>
阳明 to life 2011-04-14
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 hinada99 的回复:]

4# 得分 <\/script><\/table>

[/Quote]
呵呵，先谢了，不过你好像对转义符和/还是没弄清楚哦
当然这样用是可以的，你还可以直接用</script></table>
/并不是特殊符号
如果是\之类有特殊用法的就需要用到转义符
\\表示单字符\
woshigodwolf 2011-04-14
  • 打赏
  • 举报
 回复
我想说即使是使用你的那个方法成功调试出来了，最后document.write也会把页面的内容全部清除了替换成document.write输出的内容
hinada99 2011-04-14
  • 打赏
  • 举报
 回复
还有点问题~~调试ing~
hinada99 2011-04-14
  • 打赏
  • 举报
 回复
4# 得分 <\/script><\/table>
5# 得分 先放到字符串里，再一次写进去确实能够监视了~~
hongmei85 2011-04-14
  • 打赏
  • 举报
 回复 
function m_start(name,tt)    //菜单组开始

{

  var temp = '<tr><td class="bj">'+(tt==1?'1':'0')+'</td>';

  temp += '<td><a href="#" onclick="zgmm()">'+name+'</a></td>';

  temp += '</tr>';

  temp += '<tr style="display: '+(tt==1?'block':'none')+';">';

  temp += '<td class="bj"> </td>';

  temp += '<td>';

  temp += '<table border="0" cellpadding="0" cellspacing="0">';

	return temp;

}





function m_end()    //菜单组结束

{

  return '</table></td></tr>';

}



function InitControlList()

{

    document.getElementById("tv_ControlPlan").innerHTML ="<table border='0' cellpadding='0' cellspacing='0' width='100%' id='A1'>";

    document.getElementById("tv_ControlPlan").innerHTML+=m_start("计划1",1);

    document.getElementById("tv_ControlPlan").innerHTML+=m_end();

    document.getElementById("tv_ControlPlan").innerHTML+="<\/table>";

}
hch126163 2011-04-14
  • 打赏
  • 举报
 回复

function m_start(name,tt) //菜单组开始
{
document.writeln('<tr><td class="bj">'+(tt==1?'1':'0')+'</td>');
// document.writeln('<tr><td><img src="js/UniversePlan/folder.png" alt=""/></td>');
document.writeln('<td><a href="#" onclick="zgmm()">'+name+'</a></td>');
document.writeln('</tr>');
document.writeln('<tr style="display: '+(tt==1?'block':'none')+';">');
document.writeln('<td class="bj"> </td>');
document.writeln('<td>');
document.writeln('<table border="0" cellpadding="0" cellspacing="0">');
}

1、都没有返回值！
2、尽量少用document.write

document.getElementById("tv_ControlPlan").innerHTML ="<table border='0' cellpadding='0' cellspacing='0' width='100%' id='A1'>";
document.getElementById("tv_ControlPlan").innerHTML+="<script type ='text//javascript'>";


你table 标签内加script 标签是什么意思！



function m_start(name,tt) //菜单组开始
{
document.writeln('<tr><td class="bj">'+(tt==1?'1':'0')+'</td>');
// document.writeln('<tr><td><img src="js/UniversePlan/folder.png" alt=""/></td>');
document.writeln('<td><a href="#" onclick="zgmm()">'+name+'</a></td>');
document.writeln('</tr>');
document.writeln('<tr style="display: '+(tt==1?'block':'none')+';">');
document.writeln('<td class="bj"> </td>');
document.writeln('<td>');
document.writeln('<table border="0" cellpadding="0" cellspacing="0">');
}


改成

function m_start(name,tt) //菜单组开始
{
var arr=[];
arr.push('<tr><td class="bj">'+(tt==1?'1':'0')+'</td>');
// arr.push('<tr><td><img src="js/UniversePlan/folder.png" alt=""/></td>');
arr.push('<td><a href="#" onclick="zgmm()">'+name+'</a></td>');
arr.push('</tr>');
arr.push('<tr style="display: '+(tt==1?'block':'none')+';">');
arr.push('<td class="bj"> </td>');
arr.push('<td>');
arr.push('<table border="0" cellpadding="0" cellspacing="0">');
return arr.join("");
}

其它的你自己改了
“狗屁不通文章生成器”登顶GitHub热榜，分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候，发现了这样一个骨骼清奇的雷人项目，而且热度还特别高。 项目中文名：狗屁不通文章生成器 项目英文名：BullshitGenerator 根据作者的介绍，他是偶尔需要一些中文...
vue的重点3:event.target.innerHTML的使用和过滤器filter、子组件传值给父组件、兄弟组件之间的传值
event.target.innerHTML 没有传递参数，上面什么都不写，下面用event接受 <div id="app"> <button v-on:click="add">点击</button> {{num}} </div> var vue = new Vue({ el: '#app',...
JS中出现 innerHTML is not a function 问题的解决办法
我们在用JS动态添加HTML时偶尔会出现这类错误 document.getElementById(...).innerHTML is not a function 因为我们不小心把代码写成了这样 ... 1.innerHTML(a)以一个变量的形式传入 let a = "<d...
HTML innerHTML属性用法及分析
innerHTML：设置或返回表格行的开始和结束...innerHTML属性w3c标准不支持的，但是各大浏览器支持它的实现。 innerHTML的用法 举例： &lt;div id="div1"&gt;&lt;/div&gt; 下面是js: var...
document.getElementById().innerHTML
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：<div id="demo">这是内容</div> 我们可以通过 document.getElementById(‘demo’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以...
JavaScript

87,904

社区成员

224,614

社区内容

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

加载中

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

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

+ 用AI写文章