Question

我需要使用该下拉值显示最接近下拉的行。但是这里发生的事情是，如果我添加一行，在下拉值变化时，值会被该值替换。

$(document).on('change', '.BundleAssetType', function() {

  var class1 = class2 = class3 = class4 = '';
  var id = $(this).val();


  class1 = $(this).closest('tr').find("td:eq(1) input[type='text']").attr('class').split(' ')[1];
  class2 = $(this).closest('tr').find("td:eq(2) input[type='text']").attr('class').split(' ')[1];
  class3 = $(this).closest('tr').find("td:eq(3) input[type='text']").attr('class').split(' ')[1];
  class4 = $(this).closest('tr').find("td:eq(4) input[type='text']").attr('class').split(' ')[1];


  $('.' + class1).val(id);
  $('.' + class2).val(id);
  $('.' + class3).val(id);
  $('.' + class4).val(id);

});

$(document).on('click', '.add', function() {
  var $tr = $(this).closest('tr');
  var $lastTr = $tr.closest('table').find('tr:last');
  var $clone = $lastTr.clone();

  $clone.find('td').each(function() {
    var el = $(this).find(':first-child');
    var id = el.attr('id') || null;
    if (id) {
      var i = id.substr(id.length - 1);
      var prefix = id.substr(0, (id.length - 1));
      el.attr('id', prefix + (+i + 1));
    }
  });

  $clone.find('input:text').val('');
  $tr.closest('tbody').append($clone);


});

$(document).on('click', '.deleteB', function() {
  //dont delete the last data row
  var parentId = $(this).closest('table').attr('id');

  if ($('#' + parentId + '  tr').length > 3) {
    var $tr = $(this).closest('tr');
    $tr.remove();

  }

});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-stripped" id="TableOne" style="width: 100%">
  <thead>
    <tr>
      <th></th>
      <th colspan="2" style="text-align: center">AM</th>
      <th colspan="2" style="text-align: center">PM</th>
      <th></th>
    </tr>
    <tr>
      <th width="30%">Category</th>
      <th width="15%">Weekday</th>
      <th width="15%">Weekend</th>
      <th width="15%">Weekday</th>
      <th width="15%">Weekend</th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="form-control BundleAssetType" autocomplete="off" name="asset_category_id[]">
          <option value="">--Select Category --</option>
          <option value="4">Medium Roller</option>
          <option value="2">Paver</option>
          <option value="1">Small Roller</option>
          <option value="3">Sweet Paver</option>
        </select>

      </td>
      <td>
        <input type="text" autocomplete="off" name="weekday_am[]" class="form-control WeekdayAssetAm">
      </td>
      <td>
        <input type="text" autocomplete="off" name="weekend_am[]" class="form-control WeekendAssetAm">
      </td>
      <td>
        <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control WeekdayAssetPm">
      </td>
      <td>
        <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control WeekendAssetPm">
      </td>
      <td>
        <div class="btn-group btn-group-sm" role="group" aria-label="">
          <button type="button" class="add btn btn-sm btn-primary">+</button>
          <button type="button" class="deleteB btn btn-sm btn-danger">-</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

请提出任何建议。

Answer 1

这是因为这里

urlSession(_ session: URLSession, assetDownloadTask: AVAssetDownloadTask, didFinishDownloadingTo location: URL)

您正在选择整个文档中包含这些类的所有元素。

你可以通过传入最接近的TR（让我们将其存储在变量中，出于性能原因，因为你多次使用它）作为按类选择这些元素的上下文来解决这个问题：

  $('.' + class1).val(id);
  $('.' + class2).val(id);
  $('.' + class3).val(id);
  $('.' + class4).val(id);

$(document).on('change', '.BundleAssetType', function() {

  var class1 = class2 = class3 = class4 = '';
  var id = $(this).val();
  var closest_tr = $(this).closest('tr');

  class1 = closest_tr.find("td:eq(1) input[type='text']").attr('class').split(' ')[1];
  class2 = closest_tr.find("td:eq(2) input[type='text']").attr('class').split(' ')[1];
  class3 = closest_tr.find("td:eq(3) input[type='text']").attr('class').split(' ')[1];
  class4 = closest_tr.find("td:eq(4) input[type='text']").attr('class').split(' ')[1];

  $('.' + class1, closest_tr).val(id); // passing closest_tr as context
  $('.' + class2, closest_tr).val(id); // makes it search for elements
  $('.' + class3, closest_tr).val(id); // only that are inside of that TR
  $('.' + class4, closest_tr).val(id);

});

$(document).on('click', '.add', function() {
  var $tr = $(this).closest('tr');
  var $lastTr = $tr.closest('table').find('tr:last');
  var $clone = $lastTr.clone();

  $clone.find('td').each(function() {
    var el = $(this).find(':first-child');
    var id = el.attr('id') || null;
    if (id) {
      var i = id.substr(id.length - 1);
      var prefix = id.substr(0, (id.length - 1));
      el.attr('id', prefix + (+i + 1));
    }
  });

  $clone.find('input:text').val('');
  $tr.closest('tbody').append($clone);


});

$(document).on('click', '.deleteB', function() {
  //dont delete the last data row
  var parentId = $(this).closest('table').attr('id');

  if ($('#' + parentId + '  tr').length > 3) {
    var $tr = $(this).closest('tr');
    $tr.remove();

  }

});

Answer 2

这是一个工作小提琴，只将选定的值应用于该行的输入：

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-stripped" id="TableOne" style="width: 100%">
  <thead>
    <tr>
      <th></th>
      <th colspan="2" style="text-align: center">AM</th>
      <th colspan="2" style="text-align: center">PM</th>
      <th></th>
    </tr>
    <tr>
      <th width="30%">Category</th>
      <th width="15%">Weekday</th>
      <th width="15%">Weekend</th>
      <th width="15%">Weekday</th>
      <th width="15%">Weekend</th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="form-control BundleAssetType" autocomplete="off" name="asset_category_id[]">
          <option value="">--Select Category --</option>
          <option value="4">Medium Roller</option>
          <option value="2">Paver</option>
          <option value="1">Small Roller</option>
          <option value="3">Sweet Paver</option>
        </select>

      </td>
      <td>
        <input type="text" autocomplete="off" name="weekday_am[]" class="form-control WeekdayAssetAm">
      </td>
      <td>
        <input type="text" autocomplete="off" name="weekend_am[]" class="form-control WeekendAssetAm">
      </td>
      <td>
        <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control WeekdayAssetPm">
      </td>
      <td>
        <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control WeekendAssetPm">
      </td>
      <td>
        <div class="btn-group btn-group-sm" role="group" aria-label="">
          <button type="button" class="add btn btn-sm btn-primary">+</button>
          <button type="button" class="deleteB btn btn-sm btn-danger">-</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

$(document).on('change', '.BundleAssetType', function() {

  var class1;
  var id = $(this).val();
  
  class1 = $(this).parents('tr').find("input[type='text']").val(id);

});

$(document).on('click', '.add', function() {
  var $tr = $(this).closest('tr');
  var $lastTr = $tr.closest('table').find('tr:last');
  var $clone = $lastTr.clone();

  $clone.find('td').each(function() {
    var el = $(this).find(':first-child');
    var id = el.attr('id') || null;
    if (id) {
      var i = id.substr(id.length - 1);
      var prefix = id.substr(0, (id.length - 1));
      el.attr('id', prefix + (+i + 1));
    }
  });

  $clone.find('input:text').val('');
  $tr.closest('tbody').append($clone);


});

$(document).on('click', '.deleteB', function() {
  //dont delete the last data row
  var parentId = $(this).closest('table').attr('id');

  if ($('#' + parentId + '  tr').length > 3) {
    var $tr = $(this).closest('tr');
    $tr.remove();

  }

});

在更改时，值将被替换为相同的值 - jquery

2 个答案: