0

次のように定義されたテーブルがあります。

<table>
    <tr>
        <td>
            <label>First</label>
        </td>
        <td>
            <input type='text' style='widht:200px; height:100px;' />
        </td>
        <td>
            <button class='but'></button>
        </td>
    </tr>
    <tr>
        <td>
            <label>Second</label>
        </td>
        <td>
            <select style='widht:100px; height:150px;'>
                <option>one</one>
            </select>
        </td>
        <td>
            <button class='but'></button>
        </td>
    </tr>
    <tr>
        <td>
            <label></label>
        </td>
        <td>
            <input type='text' style='widht:200px; height:100px;' />
        </td>
        <td>
            <button class='but'></button>
        </td>
    </tr>
    <tr>
        <td>
            <label>Third</label>
        </td>
        <td>
            <textarea style='widht:500px; height:200px;'></textarea>
        </td>
        <td>
            <button class='but'></button>
        </td>
    </tr>
</table>

次に、ボタンをクリックすると、前のコントロールの高さを取得したいと思います。だから私はこのコードを書いた：

 $(".but").live('click',function(){
     alert($(this).prev().css('width'));
     alert($(this).prev().css('height'));
 });

しかし、アラートは値を未定義として示しています。どうすればこれを解決できますか?

4

4 に答える 4

1

使用する：

var input = $(this).parent().prev().find("input");
if(input) { // You have a select, so this won't be found in all circumstances
    alert(input.css('width'));
    alert(input.css('height'));
}
于 2013-04-16T11:01:02.947 に答える
0

width()css ( ) で定義された幅ではなく、要素の実際の幅を取得するには、real を使用します.css('width')。同じことが高さにも当てはまります。

$(".but").live('click',function(){
    alert($(this).prev().width());
    alert($(this).prev().height());
});
于 2013-04-16T10:56:47.790 に答える
0

あなたが試すことができます： jsFiddle

$(".but").live('click',function(){
     alert($(this).closest("tr").find('input').css('width')); 
     // OR
     //alert($(this).closest("tr").find('select').css('width'));     
});
于 2013-04-16T11:10:02.520 に答える
0

実際、ボタンの以前のターゲットはありません。

TD の高さが必要な場合は、代わりに .parent() を呼び出す必要があります。

そして、あなたの HTML に注意してください!

編集: フィドルが更新されました: http://jsfiddle.net/jVsRW/4/

$(".but").on('click', function() {
    // Of course display null for the first button that do not have a previous form element.
    alert($(this).closest('tr').prev().find('input, select, textarea').height());
});
于 2013-04-16T10:59:36.313 に答える