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

好的，谢谢@Chad 的帮助。你真的是一个救生员。

我采取了你所做的，在这个新版本的代码中更进一步：

New CodePen

但是我现在有一个非常小的 js 问题。我将其设置为仅在相关堆栈关闭时将“.vendor”输入设置为只读，但是我需要针对“.vendor”以外的其他内容，因为它也会影响每个克隆“.vendor”。

会不会是这样的： $(this).parent().next().child().child();?

Answer 2

好的，我想我找到了你的问题。您正在尝试拨打$(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/

Answer 3

我使用 chrome 开发人员工具检查了您的代码，当我单击 delPTbutton 按钮删除最后一行时，它在您的 removeRow 方法中显示错误，错误消息是：

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

这里的问题是'querySelectorAll'是javascript基础api之一，但你在jquery对象之后使用它。

考虑使用 $(table).find('tr') 代替。