Question

我成功克隆了我的表行，其中包含从数据库中检索的值。但是我对它几乎没有问题。我使用了所有元素的类，因为克隆会复制ID。没有问题引发因为它无法唯一地定位每个元素。什么方法可以使每个元素/行独特？

这些功能如何运作：

选择第一个选择框时，该选定ID的项目将显示在下一列中。按价格文本框和数量文本框关注。如果两者都已填满，则会自动显示总金额的最后一个文本框。

克隆的问题是： *当从第一个/原始行中选择的选择框时，所有克隆的项目都会使用值进行更新。数据文本框的名称会更新，反之亦然。

我的剧本：

<script>
  var harga;
  var qty;

  $("input[name^=harga]").on("keyup", function () {
    alert($(this).attr("id"));
    console.log($(this).val());
    harga = $(this).val();
  });

  $(".qty").on("keyup", function () {
    console.log($(this).val());
    qty = $(this).val();
    var amount = harga * qty;
    $(".amount").val(amount);
  });

  $(document).ready(function () {
    $(".sub_item").hide();
    $('.gr').change(function () {
      var gr_id = $(this).find('option:selected').val();
      console.log(gr_id);
      var agency_id = '<?php echo $_SESSION['
      agency_id
      '];?>';
      /*show branch for selected department starts*/
      var data;
      $.ajax({
        type: "POST",
        dataType: "json",
        url: s_path + "get-item.php?group=" + gr_id + "&agency=" + agency_id, //Relative or absolute path to response.php file
        data: data,
        success: function (data) {
          $(".sub_item").show();
          $(".it_id").empty();
          for (i = 0; i < data.length; i++) {
            $(".it_id").append("<option value='" + data[i].item_id + "'>" + data[i].item_name + "</option>");
          }
          if (data.length == "") {
            $(".it_id").append("<option>No items found</option>");
          }
          console.log(data);
        }});//end success
      /*show branch ends*/
    });
  });

  $("#more_items").on("click", function () {
    alert("Hi");
    $(".clone_this").clone(true, true).insertBefore("#last_e");
  });

  $(function () {
    $("#hide1").hide();
    $("#hide2").hide();
    $("#hide3").hide();
    $('#faktor').change(function () {
      var val = $(this).val();
      //alert($(this).val());
      if ($.trim(val) == 1) {
        $("#hide1").show();
      } else {
        $("#hide1").hide();
      }
    });

    $('#insurance').change(function () {
      $("#hide2").show();
      var val = $(this).val();
      //alert($(this).val());
      if ($.trim(val) == 1) {
        $("#hide2").show();
      } else {
        $("#hide2").hide();
      }
    });

    $('#bon').change(function () {
      $("#hide3").show();
      var val = $(this).val();
      //alert($(this).val());
      if ($.trim(val) == 1) {
        $("#hide3").show();
      } else {
        $("#hide3").hide();
      }
    });
  });
</script>

表格

<form action="#" method="POST" id="submit_item">
    <input type="text" name="contract_id" value="" id="contract_id2"/>
    <table>
        <tr>
            <th>Group Item</th>
            <th>Nama Item</th>
            <th>Harga</th>
            <th>Kuantiti</th>
            <th>Amount</th>
        </tr>
        <tr class="clone_this">
            <td>
                <select name='group' style="width:80px;" class="gr">
                    <option>Choose group</option>
                    <?php
                        $group = $agency->show_all_group();
                        foreach ($group as $k => $v) {
                            $i = 0;
                            $i++;
                    ?>
                        <option value="<?php echo $v['group_id'] ?>"><?php echo $v['group_name'] ?></option>
                    <?php
                        }
                    ?>
                </select>
            </td>
            <td class="sub_item">
                <select name='item' style="width:100px;" class="it_id">

                </select>
            </td>
            <td><input type="text" name="harga_<?php echo $i; ?>[]" id="<?php echo $i; ?>" value="" class="harga"/></td>
            <td>
                <input type='text' size='2' value="" name='qty[]' class='qty'/>
            </td>
            <td><input type="text" name="amount[]" class="amount" value=""/></td>
        </tr>
        <tr id="last_e">
            <td colspan="3"><input type="submit" name="submit" value="Next" id="item_s"/></td>
            <td><input type="button" value="Add more items" id="more_items"/></td>
        </tr>
    </table>
</form>

Answer 1

您需要找到要更新的相关元素

$(document).ready(function () {

    $('#submit_item').on('keyup', '.qty, .harga', function () {
        var $tr= $(this).closest('tr');

        $tr.find('.amount').val($tr.find('.harga').val() * $tr.find('.qty').val() || 0)
    })

    $(".sub_item").hide();
    $('#submit_item').on('change', '.gr', function () {

        var $this = $(this),
            $tr = $this.closest('tr'),
            gr_id = $this.find('option:selected').val(),
            $subitem = $tr.find('.sub_item'),
            $it_id = $tr.find('.it_id');

        var agency_id = '<?php echo $_SESSION['agency_id'];?>';

        /*show branch for selected department starts*/
        var data;
        $.ajax({
            type: "POST",
            dataType: "json",
            url: s_path+"get-item.php?group="+gr_id+"&agency="+agency_id, //Relative or absolute path to response.php file
            data: data,
            success: function (data) {
                $subitem.show();
                $it_id.empty();
                for (i = 0; i < data.length; i++) {
                    $it_id.append("<option value='" + data[i].item_id + "'>" + data[i].item_name + "</option>");
                }
                if (data.length == "") {
                    $it_id.append("<option>No items found</option>");
                }

                console.log(data);
            }
        }); //end success

        /*show branch ends*/
    });
});

演示：Fiddle

克隆元素的事件对应于表单中的所有元素

1 个答案: