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

行を表示したい場合は、「block」の代わりに CSS 表示プロパティ「table-row」を使用してみてください。

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 に答える