JavaScript - Firing alerts once per column
Sep 17, 2012
Suresh Vasudev
3 minute read

In our application, there was an HTML table which is like an Excel Grid, where users can enter data. Each cell contains a textbox through which user can enter data. There are alerts and remainders which can be configured and they get fired when the focus comes to the cell. However, the business wants the alert to be fired only once per column.

Assume that the table contains 10 rows and 10 columns. The user has set alert for all even columns - 2,4, 6 8 and 10. So when focus comes to this field, the system MUST fire the underlying alert message set for that column. However, this alert needs to be fired ONLY ONCE per column.

The code is legacy and so no naming convention was followed. Normally each cell in the table will have an index from which we can make out which column it belongs to. However, the code we have was so amateur that we cannot determine the cell index based on the id of the element in it.

We need a reliable solution and we decided to make use of the TD cell index.

Logic

  • Define onfocus event for each element in the cell
  • Define a JS function for the onfocus event.
  • Pass the current element id as a parameter to the above JS function
  • Insider the JS function, get handle to underlying TD onject and its cell index.
  • Check whether cell index is already is considered by checking a string, which contains all the handled cell index appended in “index” format.
  • If cellIndex string is not found, then it will show the alert and append the current cellindex to it.

The above logic makes sure that alert will be fired only one time for each column, irrespective of which cell is accessed by the user.

Demo

Let us create a table with 4 columns and 6 rows, each containing a textbox element. We will then define an “onfocus” event and to which the respective textbox element is passed.

A javascript method is then defined which will be triggered during “onfocus” event.

table

Here is the code which does the magic

<html> <head> ``<script>

// a magic variable which will store all the cell index for which alerts are shown.

// a cell index will be stored in <strong>"_{INDEX}_"</strong> format

var magic = "";

/*

The function which will be invoked bu onfocus EVENT of the cell element, which in this example is the textbox.

The function will first extract the cell index and check whether alert is already generated for that column.

*/

function focuson(obj)  {

// extracting the underlying TD cell index of the object in focus.

var val = "_"+obj.parentNode.cellIndex+ "_";

// check whether the index is already considered.

if (magic.indexOf(val) < 0 )  {

// adding the current index string to the magic string.

magic = magic + val;

// displaying the alert message for the column.

alert(val + "Focus  ON : " + obj.parentNode.cellIndex);

}

}

</script>

</head>

<body>.

<table border="1">

<tr>

<td><input id="id1" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id2" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id3"  type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id4"  type="text" value="Hello" onfocus="focuson(this)" /></td>

</tr>

<tr>

<td><input id="id1" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id2" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id3"  type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id4"  type="text" value="Hello" onfocus="focuson(this)" /></td>

</tr>

<tr>

<td><input id="id1" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id2" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id3"  type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id4"  type="text" value="Hello" onfocus="focuson(this)" /></td>

</tr>

<tr>

<td><input id="id1" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id2" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id3"  type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id4"  type="text" value="Hello" onfocus="focuson(this)" /></td>

</tr>

<tr>

<td><input id="id1" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id2" type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id3"  type="text" value="Hello" onfocus="focuson(this)" /></td>

<td><input  id="id4"  type="text" value="Hello" onfocus="focuson(this)" /></td>

</tr>

</table>

</body>

</html>