Question

我正在尝试隐藏一排桌子。这是表格行：

<input id="CheckboxDamage" onchange="ChangeDmgExpVisibility()" type="checkbox" runat="server" />
<table style="width: 100%;">
***some other rows***
<tr id="dmg">
  <td>
    <asp:TextBox ID="TextBoxDamageExplanation" TextMode="MultiLine" runat="server"></asp:TextBox>
  </td>
  <td>
    <asp:FileUpload ID="FileUploadDamage" runat="server" />
  </td>
</tr>
</table>

这是我的js：

function ChangeDmgExpVisibility() {
        var txtbox = document.getElementById('dmg');
        var checkbox = document.getElementById('CheckboxDamage');

        if (checkbox.checked)
            txtbox.style.visibility = "visible";
        else
            txtbox.style.visibility = "hidden";
    }

我也尝试过：

function ChangeDmgExpVisibility() {
        var txtbox = document.getElementById('dmg');
        var checkbox = document.getElementById('CheckboxDamage');

        if (checkbox.checked)
            txtbox.style.display = "block";
        else
            txtbox.style.display = "none";
    }

他们都没有给出任何结果。有什么建议吗？

Answer 1

您可能在定义函数之前调用了该函数。它在这个jsfiddle中运行良好：

https://jsfiddle.net/cv29c702/

代码如下所示：

<script>
function ChangeDmgExpVisibility() {
        var txtbox = document.getElementById('dmg');
        var checkbox = document.getElementById('CheckboxDamage');

        if (checkbox.checked)
            txtbox.style.visibility = "visible";
        else
            txtbox.style.visibility = "hidden";
    }
</script>

<input id="CheckboxDamage" onchange="ChangeDmgExpVisibility()" type="checkbox" runat="server" />
<table style="width: 100%;">
***some other rows***
<tr id="dmg">
  <td>
    <asp:TextBox ID="TextBoxDamageExplanation" TextMode="MultiLine" runat="server">hello there</asp:TextBox>
  </td>
  <td>
    <asp:FileUpload ID="FileUploadDamage" runat="server" />
  </td>
</tr>
</table>

我确实在HTML中调用它之前确定了函数

Answer 2

感谢所有的支持，但没有任何效果，这很奇怪，因为它在jsfiddle.net中运行良好，而不是在我的代码中工作。我使用了一种不同的，简单的方法来解决问题：

var see = true;
    function ChangeDmgExpVisibility() {
        var txtbox = document.getElementById('dmg');

        if (see) {
            txtbox.style.visibility = "hidden";
            see = false;
        }

        else {
            txtbox.style.visibility = "visible";
            see = true;
        }

    }

就像我说的那样，我仍然不知道为什么我的第一种方法不起作用，但这没有问题。

Javascript不会隐藏tr元素

2 个答案: