通过直接输入或按钮更改输入值时突出显示一行

debugcn 发表于 Dev

杰夫_S

我的网站上有一个表格行部分，其中包括一个减号按钮、一个输入字段和一个添加按钮。我正在尝试使该行的背景在输入更改时突出显示，无论是通过直接输入还是通过按钮增加/减少。

第一个问题是，我的代码不起作用。页面加载和按钮正确增加/减少输入框中的数字，但没有突出显示。所以我需要让它工作，但有一个问题：当“0”回到输入框中时，我希望颜色重置。因此，任何高于零的数字都会保持突出显示，但“0”会将其返回到无突出显示。

这是到目前为止的代码：

$("tr > td > input").focus(function(e) {
  $(this).parent().parent().addClass('highlight');
}).blur(function(e) {
  $(this).parent().parent().removeClass('highlight');
});

$('.incrementer-class-name').each(function() {
var $this = $(this);
var $input = $this.find('.md-input');
$this.on('click', '.add-button', function() {
var val = parseInt($input.val());
$input.val(++val);
}).on('click', '.remove-button', function() {
var val = parseInt($input.val());
$input.val(--val);
});
});

tr.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="incrementer-class-name">
        <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
        <input type="text" class="md-input" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0'
        />
        <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
      </div>
    </td>
  </tr>
</table>

安德鲁·洛尔

由于您使用的是 jQuery，使用最接近的函数将帮助您突出显示该行。jQuery 也有addClass和removeClass来帮助你解决这个问题。

首先，您需要一个事件来监听输入的变化（我使用了 keyup 事件），然后检查所需条件的值并更新最接近的tr.

此示例足够动态，您可以添加多行并使其仍然有效

$('.incrementer-class-name').each(function() {
  var $this = $(this);
  var $input = $this.find('.md-input');
  $this.on('click', '.add-button', function() {
    var val = parseInt($input.val());
    $input.val(++val);
    if (val === 0) {
      $(this).closest("tr").removeClass("highlight");
    } else {
      $(this).closest("tr").addClass("highlight");
    }
  }).on('click', '.remove-button', function() {
    var val = parseInt($input.val());
    $input.val(--val);
    if (val === 0) {
      $(this).closest("tr").removeClass("highlight");
    } else {
      $(this).closest("tr").addClass("highlight");
    }
  });
});

$(".highlightInput").on("keyup", function(e) {
  if ($(this).val() === "0") {
    $(this).closest("tr").removeClass("highlight");
  } else {
    $(this).closest("tr").addClass("highlight");
  }
});

.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="incrementer-class-name">
        <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
        <input type="text" class="md-input highlightInput" id="{{ $psku->quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='0'
        />
        <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
      </div>
    </td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。