Question

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

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

代码下面的

<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>

我该怎么做？

Answer 1

你的问题是重复的ID。

您不应添加两个或多个具有相同Id的元素。因此，要解决此问题，您动态添加的元素不应具有id属性，然后使用class属性来定位每行中的元素。

工作样本：http://jsfiddle.net/3W48W/2/（纳入@Barmar的回答）

HTM

Answer 2

您的代码存在两个问题：

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

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

第一行后动态添加行和计算功能错误

2 个答案: