javascript - jQuery 添加和删除行问题

Question

我正在尝试为我们在工作中使用的已经实现的工具创建一个新用途，但我非常确定我做错了什么。

我不知道如何让它删除一行。更重要的是，我可以弄清楚如何克隆 .pt-entry 中的所有内容，并在增量 .pt-entry 中复制它...但无需用户填写信息。

希望这是有道理的。

你可以看看我的Pen here ，但这里是其他人的代码分解:

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();
    });
});

应该看起来像这个模型......

Answer 1

好的，我想我发现了你的问题。您正在尝试调用 $(table).querySelectorAll('tr')。 .querySelectorAll 是一个与 JQuery 选择器一起使用的 javascript 函数。这是您的 removeRow() 函数炸弹的地方。尝试注释该行。然后，您将需要找到一种新方法来选择最后一行，这可以很容易地完成:

$(table).find('tr:last').remove();

最终形式:

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

如果你想让它在 IE8 和更早版本中工作，你可以使用这个 JQuery，因为你有行数:

$(table).find('tr').eq(rowCount - 1).remove();

代替:

$(table).find('tr:last').remove();

JSFiddle:http://jsfiddle.net/Em8Q5/2/

编辑:-------------------------------------------- ----------------------------------------

好吧，我找到了一个能够删除当前行的解决方案。

首先，允许一个参数进入您的 removeRow 函数并将选择器切换为使用 closest:

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

然后您将需要修改您的.click 函数，以便它会随着您添加/删除行/按钮而动态变化。另外，请注意参数，以便它知道单击了哪一行的按钮。

//removeButton.click(function(e){
$('body').on("click", ".delPTbutton", function(e) {
    removeRow($(this)); //Note the parameter that we added so it knows which row to remove
});

JSfiddle:http://jsfiddle.net/Em8Q5/3/