asked on

Clear the input border line

Hi, Experts, I want to clear the red border line in every time I click the table. how to do it base on the code below?

<script>
$(function() {
  $(document ).on("click","#myPersonnelView89 input.i86s",function(){
    let tr = $(this).closest('tr');
    let a = tr.find('input')[0].value; 
    let b = tr.find('input')[2].value;
    let c = tr.find('input')[3].value;
 
    tr.find('input')[1].style.borderColor = "red"

    document.getElementById('P1').value = a;
    document.getElementById('P2').value = b;
    document.getElementById('P3').value = c;

  });
});
</script>

Open in new window

Julian Hansen

What does your table markup look like? Is each input in its own cell <td>?

If you are talking about undoing line 9

tr.find('input')[1].style.borderColor = "red"

Open in new window

Can't you just do

$('table').click(function() {
  $('input.fred').css({borderColor: 'inherit'});
})

Open in new window

This will set the border of ALL input's back to the inherited value

Whing Dela Cruz

ASKER

Hi, Julian, this is my table...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<body>
<div>
  <table id="myPersonnelView89">
    <tr>
      <th>Code</th>
    </tr>
    <tr>
      <td><input type="text" class="i86s" value="100"></td>
    </tr>
    <tr>
      <td><input type="text" class="i86s" value="101"></td>
    </tr>
    <tr>
      <td><input type="text" class="i86s" value="102"></td>
    </tr>
  </table>
</div>



<script>
$(function() {
  $(document ).on("click","#myPersonnelView89 input.i86s",function(){
  
    let tr = $(this).closest('tr');
    let a = tr.find('input')[0].value; 

    tr.find('input')[0].style.borderColor = "red"

  });
});

</script>

</body>
</html>

Open in new window

Ryan Chong

you can try add:

$('input').removeAttr('style');

Open in new window

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<body>
<div>
  <table id="myPersonnelView89">
    <tr>
      <th>Code</th>
    </tr>
    <tr>
      <td><input type="text" class="i86s" value="100"></td>
    </tr>
    <tr>
      <td><input type="text" class="i86s" value="101"></td>
    </tr>
    <tr>
      <td><input type="text" class="i86s" value="102"></td>
    </tr>
  </table>
</div>



<script>


$(function() {
  $(document ).on("click","#myPersonnelView89 input.i86s",function(){
  


    let tr = $(this).closest('tr');
    let a = tr.find('input')[0].value; 

    $('input').removeAttr('style');
    tr.find('input')[0].style.borderColor = "red"

  });
});

</script>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Whing Dela Cruz

ASKER

Hi, guys both solution are working very well. I just want to say, thank you to both of you..

Julian Hansen

You are welcome.

Ryan Chong

in addition, you may think better ways of handling scenarios, such as if an end user moving the focus by pressing the tab, etc, then your "red border" should move accordingly as well. just a suggestion.