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>
Whing Dela CruzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Banshi lal dangiFull Stack DeveloperCommented:
Hi, For that you need to use jQuery for the same. So I have crated a working example code, you can check the same here.
Fiddle
0
Banshi lal dangiFull Stack DeveloperCommented:
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

0
Leonidas DosasCommented:
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 onclick="myFunction('1');">Click me</button>

Open in new window


JS only
function myFunction(x)
{
  document.getElementsByTagName('input')[x].style.border = 'solid 2px green';
}

Open in new window


Note the arg x that you can pass in the function so to choose the specific element of the getElementsByTagName('input') array.In this case [1]
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Banshi lal dangiFull Stack DeveloperCommented:
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

0
Leonidas DosasCommented:
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

0
Whing Dela CruzAuthor 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!
0
Leonidas DosasCommented:
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

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.