Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>

function focusFunction(val) {
  document.getElementById("myInput").style.background = "yellow";
  
  //var currentElement = document.activeElement.value;
  
  document.getElementById("display_message").innerHTML = " on the road again ... " + val;
  
  //alert("  ===   "  + val );
  
  
}

function blurFunction() {
  document.getElementById("myInput").style.background = "red";
  
  document.getElementById("display_message").innerHTML = "";
}

</script>

<body>

<h2>A basic HTML table</h2>

<table>
  <tr>
    <th>Un</th>
    <th>Deux</th>
    <th>Trois</th>
  </tr>
  <tr>
    <td><input type="text" id="myInput" name="col1" onfocus="focusFunction(this.id)" onblur="blurFunction() " /></td>
    <td><input type="text" id="aaa" name="col2" onfocus="focusFunction(this.id)" onblur="blurFunction() " /></td>
    <td><input type="text" id="zzz" name="col3" onfocus="focusFunction(this.id)" onblur="blurFunction() " /></td>
  </tr>
  
</table>

<p>To understand the example better, we have added borders to the table.</p>

</body>
</html>