We help IT Professionals succeed at work.

html border input line

Whing Dela Cruz
on
132 Views
Last Modified: 2017-03-12
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>
Comment
Watch Question

Banshi lal dangiFull Stack Developer
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Banshi lal dangiFull Stack Developer

Commented:
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

CERTIFIED EXPERT
Distinguished Expert 2017
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Banshi lal dangiFull Stack Developer

Commented:
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

CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
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

Author

Commented:
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!
CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
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

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions