Question

我已经浏览了许多不同的Q＆amp; A试图找到一个我可以修改的答案，以便为我想做的事情工作。我所拥有的是一个表格，用于公司内对同一表格有不同要求的不同“单位”。我试图使用JS（不使用jQuery）来改变几个表行的可见性，具体取决于选择的“单位”数。

选择框部分：

<tr>
    <td class="left"><span class="required">*</span>Store Number:</td>
    <td>
        <select id="storenumber" name="storenumber" required title="Please select your store ID number" onChange="salad()">
            <option value="">Select Store Number</option>
            <option value="010576">010576</option>
            <option value="011169">011169</option>
            <option value="008181">008181</option>
            <option value="010324">010324</option>
            <option value="008615">008615</option>
            <option value="009150">009150</option>
            <option value="014640">014640</option>
            <option value="010684">010684</option>
            <option value="011168">011168</option>
            <option value="014215">014215</option>
            <option value="008179">008179</option>
            <option value="008339">008339</option>
            <option value="008668">008668</option>
            <option value="031574">031574</option>
        </select>
    </td>
</tr>

应为某些“单位”隐藏的表格行：

<tr id="frig1" style="visibility: hidden;">
    <td class="left"><span class="required">*</span>Refrigeration Unit #1:</td>
    <td><input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>
<tr id="frig2">
    <td class="left"><span class="required">*</span>Refrigeration Unit #2:</td>
    <td><input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>
<tr id="frig3">
    <td class="left"><span class="required">*</span>Refrigeration Unit #3:</td>
    <td><input name="refrig3" type="text" required id="refrig3" size="3" onChange="coldValidate(this)"></td>
    <td class="noborder"></td>
</tr>

我尝试过的JavaScript函数：

function salad() {
    var storenumber = document.getElementById("storenumber");
    switch(storenumber.value) {
        case "010576":
            document.getElementById("frig1").style.value = "visible";
            break;
        case "011169":
            break;
        case "008181":
            document.getElementById("frig1").style.value = "visible";
            break;
        case "010324":
        case "008615":
        case "009150":
            break;  
    }
}

我甚至试图去W3Schools找到答案，但是他们使用的例子不适合我的表格。

Answer 1

你正在调用错误的方法。

试试......

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
        Handles Button1.Click
    Dim oword As New Microsoft.Office.Interop.Word.Application()
    Dim odoc As Word.Document
    oword = CreateObject("Word.Application")
    oword.Visible = True
    odoc = oword.Documents.Add
    Dim ofd As New OpenFileDialog()
    ofd.Filter = "Images (*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF"
    ofd.Title = "Choose your images...."
    ofd.Multiselect = True
    If ofd.ShowDialog() = DialogResult.OK Then
        For Each filename As String In ofd.FileNames
            Dim oPara2, oPara3 As Word.Paragraph
            oPara2 = odoc.Content.Paragraphs.Add
            Dim map As InlineShape = odoc.InlineShapes.AddPicture _
                (filename, Type.Missing, Type.Missing,Type.Missing) 
            map.Height = 350
            map.Width = 350
            oPara3 = odoc.Content.Paragraphs.Add
            oPara3.Range.Font.Name = "Arial"
            oPara3.Range.Font.Size = 14
            oPara3.Range.Text = "Picture no "
        Next
    End If
End Sub

这是document.getElementById("frig1").style.visibility = 'visible'属性的语法：

visibility

Answer 2

做这些工作吗？

document.getElementById("frig1").style.display = 'none'

和

document.getElementById("frig1").style.display = 'block'

Answer 3

希望这会有所帮助

document.getElementById('domElementId').style.visibility = "visible" ;
document.getElementById('domElementId').style.visibility = "hidden" ;

内联样式具有最高优先级，可以在其他情况下产生问题。我们可以有一个类并使用js添加它

CSS

.showMenu{
visibility:visible;
}
.hideMenu{
visibility:hidden;
}

JS更改

document.getElementById('domElementId').classList.add("showMenu");
document.getElementById('domElementId').classList.remove("hideMenu");

Answer 4

您需要指定document.getElementById(...).style.visibility并切换hidden vs visible而不是值。您可能需要使用display: block和display: none，因为这些会完全删除视图中的行，而可见性会在保持页面空间的同时隐藏它。

Answer 5

你可以尝试使用吗？ document.getElementById（“frig1”）。style.visibility =“hidden”; - 隐藏元素

和 document.getElementById（“frig1”）。style.visibility =“visible”; - 使元素可见

Answer 6

请参阅http://jsfiddle.net/hLyvhd91/1/

var element_to_hide = document.getElementById("row2");

element_to_hide.style.visibility = 'hidden';
//element_to_hide.style.display = 'none';

console.log(element_to_hide.style.visibility);

使用Javascript更改html可见性

6 个答案: