Question

我的网站上有一个表格行部分，其中包括减号按钮，输入字段和添加按钮。我试图通过直接键入输入或通过按钮增加/减少来改变输入时突出显示行的背景。

第一个问题是，我的代码无效。页面加载和按钮正确地增加/减少输入框中的数字，但没有突出显示。所以我需要让它工作，但有一个问题：当输入框中的'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>

Answer 1

由于您使用closest函数使用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>

Answer 2

在您的输入中添加keyUp个事件

<input type="text" id="box" onkeyUp="doHighlight()" />

你的css：

.highlight{
    background-color: yellow;
}

创建一个突出文本框的功能

function doHighlight(){
    var box = $('#box')
    var value = box.val();
    console.log(value);
    if(value === '0'){
        box.removeClass("highlight");
    }
    else{
        box.addClass("highlight");
    }
}

您的remove和add按钮也应调用doHighlight函数

编辑：对于生成的Id，将您的ID传递给doHighlight函数，以便

function doHighlight(id){
    var box = $('#'+id)
...

Answer 3

使用keyup

$(".md-input").keyup(function(e) {
  var $input = $(e.currentTarget);
  setStyle($input.val(), $input);

})

$('.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);
    setStyle($input.val(), $input);
  }).on('click', '.remove-button', function() {
    var val = parseInt($input.val());
    $input.val(--val);
    setStyle($input.val(), $input);
  });
});

function setStyle(value, e) {
  if (value == '0') {
    e.removeClass('highlight');
  } else {
    e.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" 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>

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

3 个答案: