0

5 つの列の 1 つに項目を追加するために使用されるこの JavaScript があります。問題は、追加ボタンをクリックすると、現在の列 (ターゲット) に新しい項目が 1 つ追加され、そこに既にある各項目が追加されることです。

まずはコード。

//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 です。すでに存在する各アイテムではなく、新しいアイテムをターゲットに追加することのみが想定されています。

4

2 に答える 2

0

私の間違い:)問題は、セルアドレスがA1 c1 r1意味を返すことCell A1, Column 1, Row 1です。そのため、 class を持つ各 div に新しいアイテムを追加しますc1。つまり、列内の既存の各アイテムと列自体に追加します。とにかく、助けてくれてありがとう。フィドルでそれをしなかった理由は、セルアドレス機能を含めていなかったためです。

したがって、問題を示す更新されたフィドルは次のとおりです。http://jsfiddle.net/Arlen22/uzPDU/2/

更新されたコードは次のとおりです。target = $("#maintable .schedtab .col.c"+c).get();

于 2013-04-29T23:38:38.217 に答える