0

我正在做一个项目，它几乎完成了，但我遇到了一个问题来完成它。我尝试了很多东西并在网上搜索，但不幸的是我无法成功。

问题在于表中动态添加的行。自动计算脚本只在表格的第一行工作，在表格的第 2、3、... 行它不起作用。

jsFiddle下面的代码：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("#AddLine").click(function () {
        //var row = "<tr><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button>X</button></td></tr>";
        var row = "<tr><td><input type=\"text\" style=\"width:100%;\" name=\"stokkodu[]\"></td><td><input type=\"text\" style=\"width:100%;\" name=\"stokadi[]\"></td><td><input type=\"text\" style=\"width:100%;\" id=\"miktar\" class=\"miktar\" name=\"miktar[]\"></td><td><input type=\"text\" style=\"width:100%;\" name=\"birim[]\"></td><td><input type=\"text\" style=\"width:100%;\" id=\"birimfiyat\" class=\"birimfiyat\" name=\"birimfiyat[]\"></td><td><input type=\"text\" style=\"width:100%;\" readonly id=\"tutar\" class=\"tutar\" name=\"tutar[]\"></td><td><input type=\"text\" style=\"width:100%;\" class=\"indirim\" name=\"indirim[]\"></td><td><input type=\"text\" style=\"width:100%;\" readonly class=\"indirimtutar\" name=\"indirimtutari[]\"></td><td><input type=\"text\" style=\"width:100%;\" class=\"kdv\" name=\"kdv[]\"></td><td><input type=\"text\" style=\"width:100%;\" readonly class=\"satirtoplami\" name=\"satirtoplami[]\"></td><td><button>X</button></td></tr>";
        $("#table").append(row);
    });

$("#table").on("click", "button", function() {
   $(this).closest("tr").remove(); 
});
});

$(document).ready(function() {
   $('input[id=miktar],input[id=birimfiyat],input[id=indirim],input[id=kdv], input[id=satirtoplami]').change(function(e)  {
        var total_mnozi = 0;
        //var $row = $(this).parent();
        var $row = $(this).closest("tr"); //this is the closest common root of the input elements
        var miktar = parseFloat( $row.find('input[id=miktar]').val() );
        var birimfiyat = parseFloat( $row.find('input[id=birimfiyat]').val() );
        var indirim = parseFloat( $row.find('input[id=indirim]').val() );
        var kdv = parseFloat( $row.find('input[id=kdv]').val() );


         //total_mnozi = ((dep + minpre + adjpre) * procombase * profcomper) || 0; //calculate traditionally; display zero until result is meaningful
          tutar = (miktar * birimfiyat) || 0;  // tutar hesaplama. miktar x birim fiyat = tutar 
          indirimtutar= (tutar * indirim / 100) || 0;  // indirim tutarı hesaplama input'a girilen %'ye göre hesaplar.
          satirtoplami= ((tutar - indirimtutar) * ((kdv / 100) + 1 )) || 0;
          $row.find('input[id=tutar]').val(tutar.toFixed(2));  // tutar'ın id="tutar"'a virgülden sonra 2 hane alacak şekilde yazdrılması.
          $row.find('input[id=indirimtutar]').val(indirimtutar.toFixed(2));
          $row.find('input[id=satirtoplami]').val(satirtoplami.toFixed(2));

    });
});

//]]>  

</script>
<input type="button" id="AddLine" value="add"/>
<table id="table">
    <tr>
    </tr>
        <tr>
            <td scope="col">Stok Kodu</th>
            <td scope="col">Stok Adı</th>
            <td scope="col">Miktar</th>
            <td scope="col">Birim</th>
            <td scope="col">Birim Fiyat</th>
            <td scope="col">Tutar</th>
            <td scope="col">İndirim (%)</th>
            <td scope="col">İndirim Tutarı</th>
            <td scope="col">KDV (%)</th>
            <td scope="col">Satır Toplamı</th>
            <td scope="col"></th>
        </tr>
        <tr>
            <td><input type="text" style="width:100%;" name="stokkodu[]"></td>
            <td><input type="text" style="width:100%;" name="stokadi[]"></td>
            <td><input type="text" style="width:100%;" id="miktar" class="miktar" name="miktar[]"></td>
            <td><input type="text" style="width:100%;" name="birim[]"></td>
            <td><input type="text" style="width:100%;" id="birimfiyat" class="birimfiyat" name="birimfiyat[]"></td>
            <td><input type="text" style="width:100%;" readonly id="tutar" class="tutar" name="tutar[]"></td>
            <td><input type="text" style="width:100%;" id="indirim" class="indirim" name="indirim[]"></td>
            <td><input type="text" style="width:100%;" readonly id="indirimtutar" class="indirimtutar" name="indirimtutari[]"></td>
            <td><input type="text" style="width:100%;" id="kdv" class="kdv" name="kdv[]"></td>
            <td><input type="text" style="width:100%;" readonly id="satirtoplami" class="satirtoplami" name="satirtoplami[]"></td>
            <td><button>X</button></td>
        </tr>
</table>​

我怎样才能做到这一点？

4

2 回答 2

0

你的问题是重复的ID。

您不应添加两个或多个具有相同Id. 所以，为了解决这个问题，你动态添加的元素不应该有id属性，然后你使用class属性来定位每一行中的元素。

工作示例： http: //jsfiddle.net/3W48W/2/（结合@Barmar 的答案）

HTM

于 2012-12-20T20:03:08.793 回答
0

您的代码有两个问题：

首先，您在动态添加的每一行中使用相同的 ID。ID 必须是唯一的。

其次，.change()绑定仅适用于页面加载时 DOM 中的元素。要处理动态添加的元素，您需要使用.on()绑定到永久元素并委托给动态元素，或者在将事件处理程序附加到 DOM 后将其绑定到新行的元素。

于 2012-12-20T20:06:48.553 回答