0

リストに新しい検索フィールドを動的に挿入できるようにする必要があるという問題があります-HTML5データ属性で定義されている特定の順序でソートされています。

この単純な HTML コードがある場合:

<table>
<tr>
    <td>Personel</td>
    <td>Region</td>
    <td>Misc</td>
</tr>
<tr>
    <td>
        <input type='checkbox' data-sort='3'> Name<br />
        <input type='checkbox' data-sort='4'> Gender
    </td>
    <td>
        <input type='checkbox' data-sort='1'> Country
    </td>
    <td>
        <input type='checkbox' data-sort='2'> Parent
    </td>      
</tr>
</table>

これにより、次の 3 つの列を持つ単純なレイアウトが作成されます。

ここに画像の説明を入力

たとえばNameをクリックすると、inputテキスト フィールドが追加されます。

ここに画像の説明を入力

次に、たとえば国フィールドを追加すると、並べ替え属性のために、名前の前にこのフィールドを追加する必要があります。

ここに画像の説明を入力

すべてのフィールドが表示されている場合:

ここに画像の説明を入力

もちろん、逆にチェックボックスをオフにすると、検索フィールドが削除されます。私はこのフィドラーを簡単なコードで持っていますhttp://jsfiddle.net/kEnye/

これをどのように行うことができるかについて、誰かがヒントを与えることができますか?

4

2 に答える 2

0 
        <table>
            <tr>
                <td>Personel</td>
                <td>Region</td>
                <td>Misc</td>
            </tr>
            <tr>
                <td valign='top' width='100'>
                    <input type='checkbox' data-sort='3' checked='checked'> Name<br />
                    <input type='checkbox' data-sort='4' checked='checked'> Gender
                </td>
                <td valign='top' width='100'>
                    <input type='checkbox' data-sort='1' checked='checked'> Country
                </td>
                <td valign='top' width='100'>
                    <input type='checkbox' data-sort='2' checked='checked'> Parent
                </td>

            </tr>
        </table>
        <br />

        <input type='text'data-sort="1" size='7' value='Country'> <input type='text' size='7' data-sort="2" value='Parent'> <input type='text' size='7' value='Name' data-sort="3"> <input type='text' size='7' value='Gender' data-sort="4">
            <script>
    $('input:checkbox').change(function(){

            if(!$(this).is(':checked'))
            {
            $('input:text[data-sort="'+$(this).attr('data-sort')+'"]').hide();
            }
            else{

                 $('input:text[data-sort="'+$(this).attr('data-sort')+'"]').show();
            }
        });
</script>

これを試して。うまくいきます

于 2013-11-04T13:53:12.920 に答える