Question

我有一个动态表，我在点击上添加新行没有问题。我有一个名为service的列，其中包含一个下拉列表和一个名为price的列。每次我做出选择时，价格会根据服务下拉列表中的相应值而变化。

我的问题是：例如，如果我选择服务（牙医），他的价格会显示在列价格中。在我添加新行并选择其他服务（骨科医生）后，他的价格显示在列价格中，并且（牙医）的价格被移除以获得（骨科医生）的价格。这是为我添加的所有新行完成的。

如何保持所有行中每项服务的价格？

var numRows = 1,
    ti = 2;

function addRow() {
  $('#addr' + numRows).html("<td><select class='service form-control' onChange='getPrice(this.value);'><option value='' hidden></option><?php foreach($serv as $s){?><option  value='<?=$s->id?>'><?=$s->insumservicio?></option><?php }?></select></td><td class='total-pag-seg'><input  name='totalpagseg" + numRows + "' type='text' class='price form-control' value='' tabindex='" + (ti++) + "' /></td>");

  $('#turf tr:last').after('<tr id="addr' + (numRows + 1) + '" class="calculation visible"></tr>');
  numRows++;
}

function getPrice(val) {
  var insurance = "<?=$insurance?>";
  $.ajax({
    type: "POST",
    url: '<?php echo site_url('
    admin / getPrice ');?>',
    data: {
      id: val,
      insurance: insurance
    },
    success: function(data) {
      $("#turf").find('tr').each(function() {
        $(this).find('input.price').val(data);
      });
    };

  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="turf">
  <thead>
    <tr>
      <td><button id="add_row"> New row</button></td>
      <td>Service</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr id='addr1' class="calculation visible">
      <td></td>
      <td>
        <select class="service form-control" onChange="getPrice(this.value);">
<option value="" hidden></option>
<?php foreach($serv as $s){?>
<option  value="<?=$s->id?>"><?=$s->insumservicio?></option>
<?php
}
?>
</select>
      </td>
      <td>
        <input type="text" class="price" tabindex="1" />
      </td>
    </tr>
    <tr id='addr2' class="calculation visible">
  </tbody>
</table>

Answer 1

此示例可以指导您：

onChange='getPrice(this);'

function getPrice(dropDown) {
  var insurance = "<?=$insurance?>";
  $.ajax({
    type: "POST",
    url: '<?php echo site_url('
    admin / getPrice ');?>',
    data: {
      id: dropDown.value,
      insurance: insurance
    },
    success: function(data) {
        $($(dropDown).parents('tr')[0]).find('input.price').val(data);
    };

  });
}

使用动态表

1 个答案: