Avatar of Whing Dela Cruz
Whing Dela Cruz
Flag for Anguilla asked on

html border input line

Hi experts, I want to color the input(text) inside the table, on a specific row, which is only on row 2. The table below has a common input(text) on columns 1 with an id of "i75". I have a button which i want that when i click the button it will be executed. Thank you!

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<table id="myTable">
  <tr>
    <th><input type="text"  id="i75"></th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="text"  id="i75"></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="text"  id="i75"></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>

</table>
<button onclick="myFunction('2')">Click me</button>

<script>
function myFunction(x)
{
  document.getElementById("i75").style.border = 'solid 2px green';
}
</script>
</body>
</html>
HTMLJavaScript

Avatar of undefined
Last Comment
Leonidas Dosas

8/22/2022 - Mon
SOLUTION
Banshi lal dangi

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Banshi lal dangi

To make it easier, following is the complete code in one place.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<table id="myTable">
  <tr>
    <th><input type="text"  id="i75"></th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="text"  id="i75"></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="text"  id="i75"></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>

</table>
<button onclick="myFunction('2')">Click me</button>

<script>
function myFunction(x)
{
$('table tr:nth-child(2) #i75').css('border','solid 2px green')
}
</script>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Leonidas Dosas

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Banshi lal dangi

Sorry I missed the parameter binding, so you can find the updated code as below. And this is fiddle link to check live.
Fiddle
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<table id="myTable">
  <tr>
    <th><input type="text"  id="i75"></th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="text"  id="i75"></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="text"  id="i75"></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>

</table>
<button onclick="myFunction('2')">Click me</button>

<script>
function myFunction(x)
{
$('table tr:nth-child('+x+') #i75').css('border','solid 2px green')
}
</script>
</body>
</html>

Open in new window

Leonidas Dosas

Here there is another code to check if your input elements is empty and then color the empty input elements with green color:
HTML:
<table id="myTable">
  <tr>
    <th><input type="text"  id="i75"></th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="text"  id="i75"></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="text"  id="i75"></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>

</table>
<button id="myButton" >Click me</button>

Open in new window


Javascript:

function myFunction()
{
  var inputElements=document.getElementsByTagName('input');
  for(var i=1;i<=inputElements.length;i++){   
  if(inputElements[i].value!==''){
    continue;
  }else{
  inputElements[i].style.border = 'solid 2px green';
  }
  }
}

var button=document.getElementById("myButton");
button.addEventListener('click', myFunction);

Open in new window

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Whing Dela Cruz

ASKER
Hello Banshi, I really appreciated the techniques you shared but as for me, beginner I would choose Leonidas solution since is very understandable on my part as beginner of this language. Thanks a lot to both of you, more power and God bless you all!
Leonidas Dosas

Correction at the above js code:

function myFunction()
{
  var inputElements=document.getElementsByTagName('input');
  for(var i=0;i<=inputElements.length;i++){   
  if(inputElements[i].value!==''){
    continue;
  }else{
  inputElements[i].style.border = 'solid 2px green';
  }
  }
}

var button=document.getElementById("myButton");
button.addEventListener('click', myFunction);

Open in new window