willy wonka willy wonka - 4 years ago 270
Javascript Question

addEventListener to specified html table column event propagation/delegation

I have a table with 10 columns and I want to add one or more event listeners to columns from 5th to 8th by using specifically

addEventListener
statement (so please no inline events like
element.onclick
).
The table is dynamic, in fact I don't know at programming time how many records the table will have at runtime because it will be populated by data only at that moment.

I already know how to "aim" to a table or to a table row or to a specified table cell to add event listeners to them but unfortunately I don't understand how to add them to certain columns or to a range of columns at once ("at once" means a for loop that loops through every row to get the desired cell of each).

Edit



The table is just a normal table like the following example and it is populated by loading data records from csv file or by adding new records by a form placed into the tfoot of the table itself. Also it is possible to edit the data into the table itself thanks to the
contenteditable
attribute added (or removed) dynamically by js when needed.

If I want to add an event listener to a row I first get the row object then I add the eventlistener to it once: all td elements will be affected as I need thanks to event propagation/delegation. Is that possible to do the same with columns?

myRow.addEventListener(input, myfunc, false);


In other words is it possible to do something like:

myCol5.addEventListener(input, myfunc, false);
myCol6.addEventListener(mouseover, myfunc, false);
myCol7.addEventListener(click, myfunc, false);
myCol8.addEventListener(input, myfunc, false);




table, td, th
{
border: 1px solid black;
border-collapse: collapse;
}

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>




Answer Source

With window.event.target.cellIndex is possible to get the cell index (from 0 to n where n is the number of table columns - 1) of a clicked cell that is the column index.

With window.event.target.parentNode.rowIndex is possible to get the row index (from 0 to n where n is the number of table rows - 1) of a clicked cell that is the row/record index.

Example:

  var col = window.event.target.cellIndex;
  var row = window.event.target.parentNode.rowIndex;

Working example:

document.addEventListener('click', function(){myFunction(event)}, false);

function myFunction()
{
  var col = window.event.target.cellIndex;
  var row = window.event.target.parentNode.rowIndex;
  alert('Col index is: ' + col + '\nRow index is: ' + row);
  
  // At this point it is easy to do something like:
  // if(col > 5 && col < 8)
  {
    //Execute this stuff 
  }
}
table, td {
    border: 1px solid black;
}
<p>Click on each td element to alert its position in the table row.</p>

<table id="myTbl">
  <tr>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
  </tr>
  <tr>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
  </tr>
  <tr>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
  </tr>
  <tr>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
    <td>Click to show cellIndex</td>
  </tr>
</table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download