CODEWITHSUNDEEP
javascriptjqueryhtml
Geoff_S
Geoff_S

Reputation: 5105

highlight a row when input value is changed by direct input or buttons

I have a table row section on my site which includes a minus button, an input field and an add button. I'm trying to make it so the background of the row highlights whenever the input is changed, either by directly typing into it or by increasing/decreasing with buttons.

The first issue is, my code isn't working. The page loads and the buttons increase/decrease the number in the input box correctly, but nothing highlights. So i need to get that to work but with one catch: I'd like the color to reset when '0' is back in the input box. So any number above zero would keep the highlight but '0' would return it to no highlight.

Here's the code so far:

$("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>

Upvotes: 0

Views: 222

Answers (3)

Lokki
Lokki

Reputation: 382

Use 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>

Upvotes: 0

Andrew L
Andrew L

Reputation: 5496

Since you are using jQuery using the closest function will help you highlight the row. Also jQuery has addClass and removeClass to help you with this as well.

First you need a event to listen to the change in the input (I used the keyup event) and then you check the value for the conditions you want and update the class of the closest tr.

This example is dynamic enough for you to add multiple rows and have it still work

$('.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>

Upvotes: 1

Ayo K
Ayo K

Reputation: 1774

add a keyUp event to your input

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

your css:

.highlight{
    background-color: yellow;
}

create a function to highlight the textbox

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

also your remove and add buttons should make a call to the doHighlight function

EDIT: for generated Id's pass your id into the doHighlight function so you have

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

Upvotes: 0

Related Questions