0

我在表格中有一个 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。当您在“出生州”字段中写入“意大利”时，会出现其他文本字段，但它们完全不在表格中！

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

4

4 回答 4

6

很简单，您在display: block表格行上进行设置。默认情况下，表行不是阻塞的，它们是display: table-row. 改变这个，它会工作。

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

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

于 2013-04-18T15:24:50.513 回答
4

这不是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/。

于 2013-04-18T15:24:48.820 回答
2

当您想要显示行时，请尝试使用 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/

于 2013-04-18T15:25:08.053 回答
1

您的问题与display:block. 这就是块的作用，它给出了新的一行。

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

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

于 2013-04-18T15:24:35.840 回答