0

http://jsfiddle.net/D6be5/

HTML

<table class="example" border="1">
    <tr>
        <td>
            <label>Enter text</label>
            <textarea>Enter text</textarea>
        </td>
    </tr>
    <tr class="clone"></tr>
</table>

<p><button id="add-row">Add Row</button></p>​

jQuery

$(document).ready(function() {
    $(this).on('click', function(event) {
        if ( ! $(event.target).closest('table').hasClass('example')) {
            $('table label').show();
            $('table textarea').hide();
        }
    });

    $('table td').on('click', function() {
        $('table label').show();
        $('table textarea').hide();
        $(this).find('label').hide();
        $(this).find('textarea').show();
    });

    $('#add-row').on('click', function() {
        _this = $('table tr.clone')
            .clone()
            .removeClass('clone')
            .insertBefore('.clone');

        _this.append('<td><label>Enter text</label><textarea>Enter text</textarea></td>');
    });                
});​

CSS

table textarea {
    display: none;
}

table .clone {
    display: none;
}​

上記のリンクは、私がやろうとしていることを説明しています。

基本的に問題はこれです。td内にラベルとテキストエリアがあり、テキストエリアは非表示で、開始時にラベルのみが表示されます。ユーザーがテーブルのセルをクリックすると、ラベルが非表示になり、textareaが表示されます。これは、行のクローンを追加しようとするまで正常に機能し、何もしません。

編集：行を複製して後でセルを追加する理由を忘れていました。私の実際のコードでは、列の作成も許可し、行のカウントを行ってからセルを追加します。

助けてくれてありがとうございました=）

4

4 に答える 4

0

イベントで.on()メソッドを使用してみてください。$('table td').click()

$('table td').on('click', function() {
    $('table label').show();
    $('table textarea').hide();
    $(this).find('label').hide();
    $(this).find('textarea').show();
});

それが役立つことを願っています

于 2013-01-03T05:36:05.377 に答える