Question

我有这个javascript，用于将项目添加到五列之一。问题是，当我点击添加按钮时，它会向当前列（目标）添加一个新项目，以及已经存在的每个项目。

首先是代码。

//adds the html code underneath the column. Get's called on document ready.
function populateTable(){
    for (var i = 0; i < 5; i++)
        $("#maintable .control .c"+i)
            .append('<a href="#" class="add" onclick="addItem('+i+')">Add</a>');
}
//...
//and the function called onclick
function addItem(c,r,doRet,target){
    if(target == undefined)
        target = $("#maintable .schedtab .c"+c).get();
    if(r == undefined){
        r = $(target).find(".item").length + 1;
    }
    var $item = $('<div class="item cell' + cellAddress(c,r) + '"></div>');
    $item.append('<input type="text" class="packers"></input>');
    $item.append('<input type="text" class="cartons" ></input>');
    $item.append('<input type="text" class="count"></input>');
    $item.focusin(showCartonsSelect);
    $item.mouseenter(showCP);
    $item.mouseleave(hideCP);
    if(doRet) return $item;
    var $targ = $(target);
    $targ.append($item);
}

这是html：

<table class="schedule">
    <tr class="schedtab">
        <td class="col c1"></td>
        <td class="col c2"></td>
        <td class="col c3"></td>
        <td class="col c4"></td>
        <td class="col c5"></td>
    </tr>
    <tr class="control">
        <td class="c1"></td>
        <td class="c2"></td>
        <td class="c3"></td>
        <td class="c4"></td>
        <td class="c5"></td>
    </tr>
</table>

编辑：好的，这是更新。当我单击添加按钮时，它会激活addItem（1），它会生成一个新的“项目”，然后将其添加到目标和已存在的每个项目中。每个项目都是一个带有“.item”类的div。它只应该将新项目添加到目标，而不是已经存在的每个项目。

Answer 1

如果我理解正确，可能会更改$targ.append($item)的{{1}}来解决您的问题。

正如你所说：“它为当前列（目标）添加了一个新项目，以及已经存在的每个项目。”

这是因为$targ.html($item)添加了留下元素现有内容的内容。 append()插入并替换以前的任何内容。

Answer 2

我的错误:)问题是单元格地址返回A1 c1 r1意味着Cell A1, Column 1, Row 1。因此，它将新项添加到具有类c1的每个div，这意味着将其附加到列中的每个现有项以及列本身。无论如何，谢谢你的帮助。它没有在小提琴中这样做的原因是我没有包含单元格地址功能。

所以这是显示问题的更新小提琴：http://jsfiddle.net/Arlen22/uzPDU/2/

更新后的代码为：target = $("#maintable .schedtab .col.c"+c).get();

jQuery append会添加多个项目

2 个答案: