JQuery works on JsFiddle but not in project
- by DanielNova
Here is the JsFiddle I created:
http://jsfiddle.net/ShHVy/
Everything works fine - different data is displayed in the column row to the right as I wish..
However, even having this exact code in my Project won't make it work
The page in question is a popup view and it looks like this:
<style type="text/css">
.highlighted { background-color: Orange; color: White; }
</style>
<script>
var chosen = [];
$("td").click(function () {
var idx = $(this).index() + 1;
$("td:nth-child(" + idx + ")").removeClass("highlighted");
$(this).addClass("highlighted");
chosen[idx] = $(this).parent("tr").index();
});
var data = {
"Differdange": ["Differdange 1", "Differdange 2", "Differdange 3", "Differdange 4"],
"Dippach": ["Dippach 1", "Dippach 2", "Dippach 3", "Dippach 4", ]
};
function pushData(id, col) {
$("#datachange table td:nth-child(" + 2 + ")").each(function (i, v) {
$(this).html(data[id][i])
});
}
$(function () {
$("#datachange td").click(function () {
var idx = $(this).index() + 1;
$("td:nth-child(" + idx + ")").removeClass("highlighted");
$(this).addClass("highlighted");
pushData($(".highlighted").html(), 2);
});
});
</script>
<html>
<head><title>Table Data Change</title></head>
<body id="datachange" class="demo">
<table>
<thead>
<tr>
<th>ID</th>
<th>DATA</th>
</tr>
</thead>
<tbody>
<tr>
<td>Differdange</td>
<td></td>
</tr>
<tr>
<td>Dippach</td>
<td></td>
</tr>
<tr>
<td>Dippach</td>
<td></td>
</tr>
<tr>
<td>Differdange</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Can anyone tell me why this small piece of JQuery doesn't work on mine (it's nothing to do with libraries as the top "td" function works 100% fine)
