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

应该看起来像这样的样机...... enter image description here

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/

Answer 2

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

（Uncaught TypeError：Object [object Object]没有方法'querySelectorAll'）

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

考虑使用$（table）.find（'tr'）而不是。

Answer 3

好的，谢谢你@Chad的帮助。你真的是一个救命的人。

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

New CodePen

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

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

jQuery添加和删除行麻烦

3 个答案: