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>