0

ページ上の一連の入力について、以下のレイアウトがあります。入力フィールド内に値が存在するかどうかに基づいて、それらを配置したいと思います。

「親」コンテナにが含まれている<tr class="Off">場合は、全体をに移動する必要があります。<div class="lowerParent">含まれている場合は<tr class="On">、に移動し<div class="upperParent">ます。

この背後にある目的は、50以上の入力が含まれる可能性のあるページがあり、すべてが使用されるわけではないことです。値を持つページを上に移動して、ユーザーが下にスクロールする必要がないようにします。ほとんど使用されていない入力フィールドの巨大なページ。

<div class='upperParent'></div>
<div class='lowerParent'></div>

<div class="parent">
    <div class="collapsed">
        <table>
            <tr>
                <td class="headers">
                    <input type="text" name="ind1" value="0"><input type="text" name="ind2" value="1">
                </td>
            </tr>
            <tr class="On">
                <td class="subHeaders">Sub Header 1</td>
                <td><input type="text" name="datafieldtag_value[33]" value="1"></td>
            </tr>
            <tr class="On">
                <td class="subHeaders">Sub Header 2</td>
                <td><input type="text" name="datafieldtag_value[34]" value="2"></td>
            </tr>
            <tr class="On">
                <td class="subHeaders">Sub Header 3</td>
                <td><input type="text" name="datafieldtag_value[35]" value="3"></td>
            </tr>
        </table>
    </div>
</div>

<div class="parent">
    <div class="collapsed">
        <table>
            <tr>
                <td class="headers">
                    <input type="text" name="ind1" value="0"><input type="text" name="ind2" value="1">
                </td>
            </tr>
            <tr class="Off">
                <td class="subHeaders">Sub Header 1</td>
                <td><input type="text" name="datafieldtag_value[36]" value=""></td>
            </tr>
            <tr class="Off">
                <td class="subHeaders">Sub Header 2</td>
                <td><input type="text" name="datafieldtag_value[37]" value=""></td>
            </tr>
            <tr class="Off">
                <td class="subHeaders">Sub Header 3</td>
                <td><input type="text" name="datafieldtag_value[38]" value=""></td>
            </tr>
        </table>
    </div>
</div>
4

2 に答える 2

2 
$('.parent').each(function(){
    if($('tr.Off', this).length > 0){
        $(this).appendTo('.upperParent');
    }else if($('tr.On', this).length > 0){
        $(this).appendTo('.lowerParent');
    }
});

divごとに、存在するかどうかを確認します。存在するtr.Off場合は、upperParentに配置します。存在しない場合は、lowerParentに配置します。

例： http： //jsfiddle.net/6H6kp/1/

于 2013-02-08T19:21:20.853 に答える
0

あなたが持っていると仮定して

<div class='upperParent'><table></table></div>
<div class='lowerParent'><table></table></div>

できるよ

$('.upperParent table').append( $("tr.On").detach() );
$('.lowerParent table').append( $("tr.Off").detach() );

質問を読み間違えました。

于 2013-02-08T19:25:30.563 に答える