Видимость таблицы с использованием Javascript и asp.net

Question

У меня есть 4 радиокнопки и 4 таблицы на веб-странице.Когда я проверяю одну радиокнопку, соответствующая таблица должна быть видимой, а остальные - невидимой.Та же логика применима ко всем 4 радиокнопкам.Пожалуйста, скажите мне Javascript, необходимый для этого.

Я пробовал следующий Javascript, но он не работает.

function showTable1(){
        if(opt1.checked)
        {
            tbl1.style.visibility="visible";
            tbl2.style.visibility="hidden";
        tbl3.style.visibility="hidden";
        tbl4.style.visibility="hidden";
            }
        }

Вот как я называю этот метод:

<asp:RadioButton ID="opt1" runat="server" Text="1"  OnCheckedChanged="javascript:showTable1()" Checked="True"   />

Answer 1

Если вы еще не знаете, что использование "visibility" не влияет на окружающий контент.где "display" удалит элемент из потока рендеринга, заставляя избыточное содержимое заполнить пространство, которое было занято предыдущим элементом.

Посмотрите, поможет ли это добавить "this" к onclick="javascript:showTable(this)

function showTable(tblNum){

var num_tables = 4; // expeted number of table to hide / show


document.getElementById(tblNum.id).checked = "checked"; // set reffering element as checked

for (var i = 1; i < num_tables + 1; i++) { 

if (document.getElementById((tblNum.id).slice(0, -1) + i).checked){

   //alert("Show table: " + (tblNum.id).slice(-1));


   document.getElementById("tbl" + (tblNum.id).slice(-1)).style.visibility = "visible";

}else{
//alert("Hide table: " + i);

document.getElementById(("tbl" + i)).style.visibility="hidden"
}

}
}

вам нужно будет установить значения атрибутов стиля для visibility или display также для элементов таблицы.

Answer 2

ИСПОЛЬЗУЙТЕ метод OnClientClick для определения вашего javascript: -

  <asp:RadioButton ID="opt1" runat="server" Text="1"  OnClientClick="showTable1()" Checked="True"   />



  function showTable1(){
                    if (window.document.getElementById("opt1").checked == true ){
                      document.getElementById("tbl1").style.display=none;//for hide and use block to show

                    }
                    else if (window.document.getElementById("RadioBtNo").checked == true ){
                       //do something here
                    }
                }

Answer 3

Я думаю, что document.getelementbyid ('opt1') не работает для управления asp.net.Нам может понадобиться что-то вроде document.getelementbyid ('<% # opt1.ClientID%>') что-то вроде этого.Потому что в управлении asp.net идентификаторы меняются.

Пожалуйста, сообщите, если у вас есть какие-либо проблемы.

Вы также можете предпочтительно использовать jquery с селекторами.Они обеспечивают очень хорошую поддержку

Answer 4

Назначьте идентификатор "tbl1" для таблицы, а в своем коде выберите элемент как

var tbl1 = document.getElementById('tbl1');

Эта функция после назначения идентификаторов для таблицы будет выглядеть как

function showTable1(){
    var opt1 = document.getElementById('opt1'); // select option by using Id
    var tbl1 = document.getElementById('tbl1');
    var tbl2 = document.getElementById('tbl2');
    var tbl3 = document.getElementById('tbl3');
    var tbl4 = document.getElementById('tbl4');

    if(opt1.checked)
    {
        tbl1.style.display="block";
        tbl2.style.display="none";
    tbl3.style.display="none";
    tbl4.style.display="none";
        }
    }

Answer 5

попробуйте

function showTable1(){
    if(document.getElementById("opt1").checked)
    {
        tbl1.style.display="";
        tbl2.style.display="none";
        tbl3.style.display="none";
        tbl4.style.display="none";
        }
    }