3

動的に作成されたテーブルの各行で同じであるdivタグを置き換えようとしています。どうしたらいいのかわからない。現在、関数を機能させることができますが、divタグの最初の行を置き換えるだけです。これが私のコードです：

<script type="text/javascript">
function Calc() {
    var qty = 0;
     qty=parseInt(document.getElementById('qtyEntry').value);
    var weight = parseInt(document.getElementById('weight').innerHTML);
    var cube = parseInt(document.getElementById('cube').innerHTML);
    var carton = parseInt(document.getElementById('carton').innerHTML);

     var newWeight = 0;
     var newCube = 0;
     var newCarton = 0;

    newWeight = qty *weight ;
    newCube = qty * cube;
    newCarton = qty * carton;

     document.getElementById('weight').innerHTML = newWeight;
     document.getElementById('cube').innerHTML = newCube;
     document.getElementById('carton').innerHTML = newCarton;
}


  @{int seq=0;
               foreach (var item in Model)
               {
                   seq++;
                <tr>
                  <td>@seq</td>
                    <td>@item.sku</td>
                    <td>@item.description</td>
                    <td><input type=text id="qtyEntry" name="buildQty" size="3" onchange="Calc()"/></td>
                    <td> <div id="carton">@item.cartonQty</div></td>
                    <td> <div id="weight">@item.weight</div></td>
                    <td><div id="cube">@item.cube</div></td>
                    <td></td>
                </tr>

                }
            }

したがって、基本的に、ユーザーがbuildQtyのテキストフィールドを変更したときに、カートン、重量、および立方体の数量を更新したいと思います。各行を更新したい。現在、別の行のテキストを更新している場合でも、最初の行のみが更新されます。

4

1 に答える 1

3

明白な問題：id'は一意であることが意図されています。あなたのものではありません。したがって、最初のものにのみアクセスします。変更としてこれを試してください：

マークアップ：

<tr>
              <td>@seq</td>
                <td>@item.sku</td>
                <td>@item.description</td>
                <td><input type=text id="qtyEntry@(seq)" name="buildQty@(seq)" size="3" onchange="Calc(@(seq))"/></td>
                <td> <div id="carton@(seq)">@item.cartonQty</div></td>
                <td> <div id="weight@(seq)">@item.weight</div></td>
                <td> <div id="cube@(seq)">@item.cube</div></td>
                <td></td>
</tr>

js：

function Calc(seq) {
 var qty = 0;
 qty=parseInt(document.getElementById('qtyEntry'+seq).value);
 var weight = parseInt(document.getElementById('weight'+seq).innerHTML);
 var cube = parseInt(document.getElementById('cube'+seq).innerHTML);
 var carton = parseInt(document.getElementById('carton'+seq).innerHTML);

 var newWeight = 0;
 var newCube = 0;
 var newCarton = 0;

 newWeight = qty *weight ;
 newCube = qty * cube;
 newCarton = qty * carton;

 document.getElementById('weight'+seq).innerHTML = newWeight;
 document.getElementById('cube'+seq).innerHTML = newCube;
 document.getElementById('carton'+seq).innerHTML = newCarton;
}

ただし、注意してください。これにより、モデルバインディングが変更される可能性があり、投稿からこれを受け入れる方法を再検討する必要があります。nameも一意ではないため（これはモデルのバインドに関係している部分です）、現在のように適切に投稿されていないと思います。

于 2013-01-16T20:37:40.980 に答える