asked on 3/12/2017

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>

HTML JavaScript

Last Comment

Leonidas Dosas

3/12/2017

SOLUTION

Banshi lal dangi

3/12/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Banshi lal dangi

3/12/2017

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

3/12/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Banshi lal dangi

3/12/2017

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

3/12/2017

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

Whing Dela Cruz

3/12/2017

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

3/12/2017

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