Скрыть таблицу на mouseout с помощью javascript

Я создаю динамическую веб-страницу с помощью Javascript, в которой я создаю несколько таблиц с содержанием, перечисленным в каждом. Первоначально с table 1 страница загружается, когда я наведите курсор на конкретный элемент на table 1, table 2 отображается рядом с table 1 со списком содержания, связанным с table 2. На mouseouttable 2 должен исчезнуть. Это делается для каждого элемента в списке table 1.Скрыть таблицу на mouseout с помощью javascript

Проблема, с которой я столкнулся, это то, что я не могу выровнять 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'; 
    }

источник

2013-12-23 Archana

любые ошибки в консоли? –

Выравнивание таблицы - это проблема CSS, а координация событий мыши - JS. Кого вы спрашиваете? – Bora

Вам нужно положить место для этих таблиц, если вы хотите организовать все. – nrathaus

Вы можете сделать так: Demo Fiddle

Проверьте, существует ли таблица, имеющий идентификатор t2 или нет, а затем создать новый, если не существует.

И добавить position:absolute css в таблицу2 с идентификатором t2 также.

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"; 

       } 
     }

источник

2013-12-23 13:46:49

-2

Это, кажется, вы хотите, чтобы переключаться между Show() и Hide() функции

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

I надеюсь, что это поможет

источник

2013-12-23 13:21:29

Не думайте, что он использует jQuery. – rlemon

У вас есть s вечные проблемы в вашем коде.

опечатка: 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

источник

2013-12-23 13:21:54

Попробуйте этот код: 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); 

    }

источник

2013-12-23 13:44:19 Manoj

Скрыть таблицу на mouseout с помощью javascript

ответ

Смежные вопросы