0

I am unable to assign style to a dynamically created column in a table.
On selecting a cell in the table, both the row and column are highlighted.
this however does not work if the element is added later on.
I used delegated binding by using on() but without the desired result. A search on the internet didn't give me a solution. Any ideas?

$("td").on("click", function(event) {
  var table = 'table'
  var styleA = {'-webkit-box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
              '-moz-box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
              'box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)'};
  var styleB = {'-webkit-box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
              '-moz-box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
              'box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
              'outline':' 3px solid #086aa7'};
  
  $(table).find("td,tr").removeAttr('style'); 
  $(table).find("td").removeAttr('style');
  $(this).parent('tr').css(styleA);
  $('td:eq(' + this.cellIndex + ')','tr').css(styleA);
  $(this).css(styleB);
});

$(document).mouseup(function(e){
    var container = $("table");
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
      $("table").find("tr,td").removeAttr('style');
      $("table").find("td").removeAttr('style');
    }
});

$(window).on("load", function () {
    $( 'table tr th:nth-child(1)').after('<th>');
  $( 'table tr td:nth-child(1)').after('<td></td>');
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
  margin: 50px 0 0 50px;
}

td,th {
  border: 1px solid #cacaca;
  text-align: left;
  padding: 8px;
  background-color: #f5f5f5;
}
th {
  background-color: #dce0e3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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</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 </td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari </td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
Dummy
  • 373
  • 1
  • 2
  • 11
  • Does the snippet work as it's supposed to? Meaning, when a cell is selected the column get's a background color and the cell a border? If so, are you saying that when new cells are added with JavaScript, these new ones don't get styled? – csalmeida Oct 20 '17 at 20:02
  • That's correct. When selected, the cell should get a border and, both the column and row a blue color – Dummy Oct 20 '17 at 20:04
  • 1
    `$("td").on("click"` is not event delegation, it is simply putting a click listener on already created elements – Patrick Evans Oct 20 '17 at 20:08
  • Thanks Patrick Evans for pointing that out. Any idea how to get working? – Dummy Oct 20 '17 at 20:09
  • See the marked duplicate, you need to use a static parent, for instance the table or document – Patrick Evans Oct 20 '17 at 20:13

1 Answers1

1

Your method is not getting bound to elements created in the future. You need to add a "delegated" binding in your on() binding: source

Do this:

$('table').on('click', $('td'), function() { ... });

where $('table') is a static element in which you add dynamic nodes.

So, you have a table which is hard-coded into the HTML source code:

<table>
  ...
</table>

and you fill it with dynamic content. The idea is to delegate the events to that table wrapper, instead of binding handlers directly on the dynamic elements.

greatgumz
  • 408
  • 3
  • 17