File "table01.html"

Full Path: /home/analogde/www/Design/fileman/Fusion/Table/table01.html
File size: 1.42 KB
MIME-type: text/html
Charset: utf-8

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

<script>
function myFunction() {
  //alert("Row index is: " + x.rowIndex);
  alert("Plouf...");
  
  // function getVal() {
  //const val = document.querySelector('input').value;
  //console.log(val);
}

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>


<div id="display_message" style="background-color: green;"> 

</body>
</html>