使用 Javascript 和 asp.net 的表可见性答案

【问题标题】：Table visibility using Javascript and asp.net使用 Javascript 和 asp.net 的表可见性
【发布时间】：2017-10-31 16:43:36
【问题描述】：

我在网页中有 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"   />

【问题讨论】：

标签： javascript asp.net radio-button webpage

【解决方案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 的样式属性值。

【讨论】：

【解决方案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
                    }
                }

【讨论】：

我尝试在 onclientclick 事件中提供它。但脚本没有被触发。我在脚本中放了一个警报并进行了测试。但没有触发警报
尝试使用 HTML 控件而不是 asp 控件：是否
同样的问题。该函数未被调用。 :(
一些小错误，例如拼写错误或您正在做的任何事情......否则它应该可以工作。仔细检查你的代码一次..:)
ya 实际上，如果您使用的是 HTML 控件，那么您可以在 onclick 事件中定义您的 javascript，但如果您使用的是 asp 控件，则将 onclick 事件回发到服务器。您不能在 onclick 事件中为 asp 控件定义 javascript。因此为此我们使用 onclientclick 事件，希望对您了解控件和 evnts 的工作有所帮助..)

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

将 id "tbl1" 分配给表格，并在您的代码中选择元素为

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

将 Id 分配给表后的此函数将如下所示

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

【讨论】：

试过这个方法。但我的错误即将到来。语法错误
您是否添加了“opt1”作为单选按钮的 id。

【解决方案5】：

我认为 document.getelementbyid('opt1') 不适用于 asp.net 控件。我们可能需要使用类似 document.getelementbyid('') 这样的东西。因为在 asp.net 控制中，id 会发生变化。

如果您有任何问题，请告诉。

您也可以最好将 jquery 与选择器一起使用。他们提供了很好的支持

【讨论】：

我的问题是 onclientclick 事件和 oncheckchanged iam 没有触发 javascript 得到语法错误
@Navya 您可以在 IE 中运行该网页，然后您可以通过单击左下角的链接找到它所在行的语法错误。可能缺少一些大括号。你也可以试试firebug。