html border input line

Whing Dela Cruz
Whing Dela Cruz used Ask the Experts™
on
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Banshi lal dangiFull Stack Developer
Commented:
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
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

Distinguished Expert 2017
Commented:
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]
Ensure you’re charging the right price for your IT

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

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

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!
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial