Question

我在表格中有一个HTML表单。除非用户在文本字段中写“意大利”，否则我希望隐藏一些元素。这个脚本在禁用我想隐藏的文本字段时工作正常：

if (e.value == 'Italy' && e.name == 'birth'){
        document.getElementById('comune_nascita').disabled = false
        document.getElementById('provincia_nascita').disabled = false
    } else if (e.name == 'birth'){
        document.getElementById('comune_nascita').disabled = true
        document.getElementById('provincia_nascita').disabled = true        
    }

实例：JSFiddle（尝试在“出生状态”字段中写“意大利”）。

我只是不想禁用文本字段：我希望它完全不可见。

所以我已经将<tr id='italy_b' style='display:none'>添加到包含文本字段的HTML元素中，并将脚本转换为：

if (e.value == 'Italy' && e.name == 'birth'){
    document.getElementById('italy_b').style.display = 'block'
} else if (e.name == 'birth'){
    document.getElementById('italy_b').style.display = 'none'
}

但是，请在此处尝试并查看错误：jsfiddle。当您在“出生状态”字段中写“意大利”时，其他文本字段显示为，但它们完全不在表格中！

我该如何解决这个问题？他们为什么要离开桌子？

Answer 1

很简单，你在表格行上设置display: block。默认情况下，表行不是块，它们是display: table-row。改变它，它会起作用。

document.getElementById('italy_b').style.display = 'table-row';

jsFiddle：http://jsfiddle.net/xAKh4/7/

Answer 2

除block之外，这不是table-row：

if (e.value == 'Italy' && e.name == 'birth'){
    document.getElementById('italy_b').style.display = 'table-row'
} else if (e.name == 'birth'){
    document.getElementById('italy_b').style.display = 'none'
}

看到这个小提琴：http://jsfiddle.net/xAKh4/5/。

Answer 3

当您想要显示行时，请尝试使用CSS显示属性“table-row”而不是“block”。

function hideItaly(e){

    if (e.value == 'Italy' && e.name == 'birth'){
        document.getElementById('italy_b').style.display = 'table-row'
    } else if (e.name == 'birth'){
        document.getElementById('italy_b').style.display = 'none'
    }

    if (e.value == 'Italy' && e.name == 'residency'){
        document.getElementById('italy_r').style.display = 'table-row'
    } else if (e.name == 'residency'){
        document.getElementById('italy_r').style.display = 'table-row'
    }

}

http://jsfiddle.net/xAKh4/2/

Answer 4

您的问题是display:block。这就是块所做的，它给出了新的界限。

所以试试这个： style.display = '';

（只是将其保留为空字符串而不是“阻止”）

隐藏在表中的元素

4 个答案: