使用javascript在mouseout上隐藏表格

时间：2013-12-23 13:02:28

标签： javascript html

我正在使用Javascript创建一个动态网页，其中我创建了多个表，每个表都列出了内容。最初加载table 1页面时，当我鼠标移到table 1上的特定项目时，table 2旁会显示table 1，其中包含与table 2相关的内容列表。在mouseout，table 2应该消失。 这是针对table 1列表中的每个项目完成的。

我在这里遇到的问题是，我无法对齐table 2，而mouseout我无法消除它。

请帮忙。

我的代码：

<!DOCTYPE html>

<html>
  <head>
    <title>Page Title</title>
    <script type="text/javascript" src="C:\JS Projects\Net.js"></script>
  </head>

  <body onload="myFunction()">
  </body>
</html>

我的JS代码：

function myFunction()
{
  document.body.style.background = "url('http://www.macwallhd.com/wp-content/Wallpapers/Animals/Desktop%20Cats%20As%20Hunters%20Pet%20Pictures10.jpg') no-repeat center center fixed"

  var div = document.createElement("div");
  div.id = "wrapper";

  //Table Creation Start
  var table = document.createElement("table");
  table.id = "t1";
  table.style.cssText = "background-color:blue;color:White; padding:10px; opacity:0.3;margin-top:150px;display:block; position:absolute;align:center;width:250px;height:300px;";

  div.appendChild(table);

  var tr1 = table.insertRow(0);
  var td = tr1.insertCell(0);
  td.innerHTML = "favourites";

  var tr2 = table.insertRow(1);
  var td = tr2.insertCell(0);
  td.innerHTML = "system";

  var tr3 = table.insertRow(1);
  var td = tr3.insertCell(0);
  td.innerHTML = "settings";

  /***********Table creation End****/

  var table2 = document.createElement("table");
  table2.id = "t2";

  tr1.addEventListener("mouseover", createTable,false);

  tr1.addEventListener("mouseout", removeTable,false);

  document.body.appendChild(div);
  };

  function createTable()
  {
    //switch(choice)
    //{
    //    case: mouseover
    //        case: mouseout
    //}

    var div = document.getElementById("wrapper");
    var table2 = document.createElement("table");
    table2.id = "t2";
    table2.style.cssText = "background-color:blue;color:White; padding:10px; opacity:0.3;align:center;width:250px;height:300px;margin-top:150px;margin-left:290px;display:block;";
    div.appendChild(table2);

    var tr1 = table2.insertRow(0);
    var td = tr1.insertCell(0);
    td.innerHTML = "channel 1";

    var tr2 = table2.insertRow(1);
    var td = tr2.insertCell(0);
    td.innerHTML = "channel 2";

    var tr3 = table2.insertRow(1);
    var td = tr3.insertCell(0);
    td.innerHTML = "channel 3";
  }

  function removeTable(){
    var elem = documenet.getElementById("t2");
    elem.style.display = 'none';
  }

4 个答案:

答案 0 :(得分：1)

您的代码中存在多个问题。

  • 错字：documenet.getElementById("t2");，应为document.get...
  • 没有必要将CSS放入Javascript
  • 您在每个mouseover上创建一个新表，这会为您提供大量表格。您不应该动态创建表。您可以先创建它们，然后只填充行。这简化了您的Javascript代码并有助于减少错误的可能性
<div id="wrapper">
    <table id="t1"></table>
    <table id="t2"></table>
</div>

body {
    background: url('http://www.macwallhd.com/wp-content/Wallpapers/Animals/Desktop%20Cats%20As%20Hunters%20Pet%20Pictures10.jpg') no-repeat center center fixed;
}
#t1, #t2 {
    background-color:blue;
    color:White;
    padding:10px;
    opacity:0.3;
    margin-top:150px;
    display:block;
    position:absolute;
    width:250px;
    height:300px;
}
#t2 {
    margin-left:290px;
    display: none;
}

function myFunction() {
    //Table Creation Start
    var table = document.getElementById("t1");
    var tr1 = table.insertRow(0);
    var td = tr1.insertCell(0);
    td.innerHTML = "favourites";

    var tr2 = table.insertRow(1);
    var td = tr2.insertCell(0);
    td.innerHTML = "system";

    var tr3 = table.insertRow(1);
    var td = tr3.insertCell(0);
    td.innerHTML = "settings";

    /***********Table creation End****/

    var table2 = document.createElement("table");
    table2.id = "t2";
    tr1.addEventListener("mouseover", createTable, false);

    tr1.addEventListener("mouseout", removeTable, false);
};

function createTable() {
    var table2 = document.getElementById("t2");
    table2.innerHTML = '';

    var tr1 = table2.insertRow(0);
    var td = tr1.insertCell(0);
    td.innerHTML = "channel 1";

    var tr2 = table2.insertRow(1);
    var td = tr2.insertCell(0);
    td.innerHTML = "channel 2";

    var tr3 = table2.insertRow(1);
    var td = tr3.insertCell(0);
    td.innerHTML = "channel 3";

    table2.style.display = 'block';
}

function removeTable() {
    var elem = document.getElementById("t2");
    elem.style.display = 'none';
}

请参阅JSFiddle

答案 1 :(得分：1)

你可以这样做：Demo Fiddle

  1. 检查是否存在标识为t2的表，如果不存在，则创建一个新表。

  2. 并将position:absolute css添加到ID为t2的table2。

        function createTable()
        {

            var div = document.getElementById("wrapper");

                 if(document.getElementById("t2")) {
                    var table2 = document.getElementById("t2");
                    table2.style.display = 'block';
                    }
                 else {
                    var table2 = document.createElement("table");
                    table2.id = "t2";
                    table2.style.cssText = "background-color:blue;color:White; padding:10px; opacity:0.3;align:center;width:250px;height:300px;margin-top:150px;margin-left:290px;display:block;position:absolute";
                    div.appendChild(table2);

                    var tr1 = table2.insertRow(0);
                    var td = tr1.insertCell(0);
                    td.innerHTML = "channel 1";

                    var tr2 = table2.insertRow(1);
                    var td = tr2.insertCell(0);
                    td.innerHTML = "channel 2";

                    var tr3 = table2.insertRow(1);
                    var td = tr3.insertCell(0);
                    td.innerHTML = "channel 3";

                }
        }

答案 2 :(得分：0)

试试此代码：DEMO

JS：

    function myFunction()
    {
      document.body.style.background = "url('http://www.macwallhd.com/wp-content/Wallpapers/Animals/Desktop%20Cats%20As%20Hunters%20Pet%20Pictures10.jpg') no-repeat center center fixed"
      var div = document.createElement("div");
      div.id = "wrapper";
      div.style.cssText = "margin-top: 150px;";        // added;

    //Table Creation Start
      var table = document.createElement("table");
      table.id = "t1";
      table.style.cssText = "background-color:blue;color:White; padding:10px; opacity:0.3;display:block; position:absolute;align:center;width:250px;height:300px;";
      div.appendChild(table);

      var tr1 = table.insertRow(0);
      var td = tr1.insertCell(0);
      td.innerHTML = "favourites";

      var tr2 = table.insertRow(1);
      var td = tr2.insertCell(0);
      td.innerHTML = "system";

      var tr3 = table.insertRow(1);
     var td = tr3.insertCell(0);
      td.innerHTML = "settings";

    /***********Table creation End****/

      var table2 = document.createElement("table");
      table2.id = "t2";
      tr1.addEventListener("mouseover", createTable,false);

      tr1.addEventListener("mouseout", removeTable,false);

      document.body.appendChild(div);
    };

    function createTable()
    {
    //switch(choice)
    //{
    //    case: mouseover
    //        case: mouseout
    //}
      var div = document.getElementById("wrapper");

      var table2 = document.createElement("table");
      table2.id = "t2";
      table2.style.cssText = "background-color:blue;color:White; padding:10px; opacity:0.3;align:center;width:250px;height:300px;margin-left:290px;display:block;";
      div.appendChild(table2);

      var tr1 = table2.insertRow(0);
      var td = tr1.insertCell(0);
      td.innerHTML = "channel 1";
      var tr2 = table2.insertRow(1);
      var td = tr2.insertCell(0);
      td.innerHTML = "channel 2";

      var tr3 = table2.insertRow(1);
      var td = tr3.insertCell(0);
      td.innerHTML = "channel 3";
    }

    function removeTable()
   {
      var div = document.getElementById("wrapper");
      var elem = document.getElementById("t2");
      div.removeChild(elem);

    }

答案 3 :(得分：-2)

似乎你想在Show（）和Hide（）函数之间切换

  <script>
$(document).ready(function(){
  $("#table1").mouseenter(function(){
    $("#table2").show();
  });
  $("#table1").mouseout(function(){
    $("#table2").hide();
  });
});
</script>

我希望它有所帮助

相关问题
最新问题