2

ここで職場で使用している既に実装されているツールの新しい用途を作成しようとしていますが、何か間違っていると確信しています。

行を削除する方法がわかりません。さらに、.pt-entry 内のすべてのクローンを作成し、それを増分 .pt-entry 内に複製する方法を理解できますが、ユーザーが情報を入力する必要はありません。

うまくいけば、これは理にかなっています。

ここで私のペンを確認できますが、残りのコードの内訳は次のとおりです。

HTML:

<table class="manage-pt" id="0">
    <tr class="pt-entry">
        <td class="pt-toggle-group">
            <input type="button" class="pt-button togPTbutton" value="?" />
            <input type="button" class="pt-button addPTbutton" value="+" /> 
            <input type="button" class="pt-button delPTbutton" value="-" />
        </td>
        <td class="pt-values">
            <div>
                <input type="text" class="vendor" placeholder="Vendor Name" />
            </div>
            <div>
                <textarea class="ptCode" name="ptCode" placeholder="Pixel Tag Code" ></textarea>
            </div>
            <div class="page-select">
                <select>
                    <option value="AllPages">All Pages</option>
                    <option value="HomePage">HomePage</option>
                    <option value="VehicleDetailsPage">VehicleDetailsPage</option>
                    <option value="VehicleSearchResults">VehicleSearchResults</option>
                    <option value="ContactUsForm">ContactUsForm</option>
                </select>
            </div>
            <div class="area-checkboxes">
                <p class="wheretosave">Where?</p>
                <input type="checkbox" name="head" /><label for="head">Head</label> 
                <input type="checkbox" name="body" /><label for="body">Body</label>
            </div>
            <div class="save-pt">
                <input value="SAVE" type="submit" />
            </div>
        </td>
    </tr>
</table>

JavaScript:

// HIDES CURRENT PT & CHANGES TOGGLE BUTTON ICON WHEN CLICKED
$('.togPTbutton').click(function(){
    $('.pt-values').slideToggle(25, function() {
        if ($('.pt-values').is(':hidden')) {
            $('input.togPTbutton').val('?');
        }else{
            $('input.togPTbutton').val('?');
        }
    });
});

$(document).ready(function () {
    var table = $('.manage-pt'),
        rows = $(table).find('tr'),
        rowCount = $(rows).length,
        addedRow = $(document.createElement('tr')),
        addButton = $('.addPTbutton'),
        removeButton = $('.delPTbutton');

    function addRow(){
        var thisRow = $(addedRow).clone(true);
        $(thisRow).attr('class','.pt-entry-' + rowCount);
        rowCount += 1;
        $(thisRow).html('<td>row</td>');
        $(table).append(thisRow);
    }

    function removeRow(){
        var items = $(table).querySelectorAll('tr');
        if (rowCount > 1) {
            $(table).remove(items[rowCount - 1]);
            rowCount -= 1;
        }else{
            alert('CANNOT DELETE LAST ROW');
        }
    }

    addButton.click(function(e){
        addRow();
    });

    removeButton.click(function(e){
        removeRow();
    });
});

このモックアップのようなものに近いはずです... ここに画像の説明を入力

4

3 に答える 3

0

わかりましたので、@Chadの助けに感謝します。あなたは真剣に命の恩人でした。

私はあなたがしたことを、この新しいバージョンのコードでさらに一歩進めました。

新しいコードペン

ただし、非常にjsの小さな問題があります。関連するスタックが閉じられたときにのみ「.vendor」入力を読み取るように設定しましたが、各クローン「.vendor」にも影響するため、「.vendor」以外のものをターゲットにする必要があります。

それは次のようなものでしょうか: $(this).parent().next().child().child();?

于 2013-09-04T14:07:43.223 に答える
0

クロム開発者ツールを使用してコードをチェックし、delPTbutton ボタンをクリックして最後の行を削除すると、removeRow メソッドにエラーが表示されました。エラー メッセージは次のとおりです。

(Uncaught TypeError: Object [object Object] has no method 'querySelectorAll')

ここでの問題は、「querySelectorAll」が JavaScript ベース API の 1 つですが、jquery オブジェクトの後に使用することです。

代わりに $(table).find('tr') の使用を検討してください。

于 2013-09-03T17:46:16.917 に答える