js innerhtml后不显示_简单js实现LOL英雄展示练习

效果说明

1、运行代码，页面显示效果（显示按钮+表格第一行内容）

2、单击显示按钮，页面显示效果（显示按钮+完整表格内容）

3、单击展示图片链接，页面显示效果（显示按钮+完整表格+图片区，如上图所示）

4、单击消失链接或者图片下方close文本行，页面显示效果（显示按钮+完整表格）

实现步骤

1、html实现效果1展示

<button type="button" id="button">展示</button>
    <table border="1px" width="800px" align="center">
        <tr bgcolor="#ff7f50">
            <th>名称</th>
            <th>技能</th>
            <th width="400px">展示</th>
        </tr>
    </table>
    <div>

    </div>

2、给显示按钮添加鼠标单击事件，事件为追加完整表格

 //       获取节点对象
       var table = document.getElementsByTagName("table")[0];
        var button = document.getElementById("button");

//        将表格内容展示的内容以对象的形式存入数组       
        var arr = new Array();
        arr[0] ={name:"阿狸",skill:"魅惑",picture:"pic1.jpg"};
        arr[1]={name:"提莫",skill:"唱歌",picture:"pic2.jpg"};
        arr[2]={name:"金克丝",skill:"放炮",picture:"pic3.jpg"};
        arr[3]={name:"盖伦",skill:"大宝剑",picture:"pic4.jpg"};
//        显示按钮单击事件       
        button.onclick=function(){
            for(var i=0; i<arr.length; i++){

                var tr = document.createElement("tr");
                tr.innerHTML="<td>"+arr[i].name+"</td><td>"+arr[i].skill+
                        "</td><td><a href='javascript:display("+(i+1)+")'>展示图片</a> <a href='javascript:close()'>消失</a></td>";
                table.appendChild(tr);

//              隔行变色
                if(i%2==0){
                    tr.style.background="red";
                }else{
                    tr.style.background="lightblue";
                }

            }
        }

3、展示图片链接，调用js的display函数

var div = document.getElementsByTagName("div")[0];
        var img = new Image();
        var p = document.createElement("p");
        function display(num){
            console.log(div);
            console.log(img);
            console.log(p);
            img.src = "pic"+num+".jpg";
            p.innerHTML = "技能:"+arr[num].skill+"|close";
//          将div块中内容置为空，确保加载加载一份图片
            div.innerHTML = "";
            div.appendChild(img);
            div.appendChild(p);
        }

4、关闭图片区内容

p.onclick = function(){close()};

        function close(){
            div.innerHTML = "";
        }