Jquery interactive table - multiple instance problem
Posted
by
petejm
on Stack Overflow
See other posts from Stack Overflow
or by petejm
Published on 2011-01-06T15:49:56Z
Indexed on
2011/01/06
15:54 UTC
Read the original article
Hit count: 238
Hello forgive me if i use the wrong terminology and the messiness of this code it is the first time I have used jquery.
I am making an interactive table-product selector. Compatible systems run along the top and colour choices down the left.
The table works by seeing if there is a cell is empty in a html table. If the cell is empty then that is a compatible system and a circle image is in that cell and it is selectable. When selected the product code is generated (by looking at the colour value and system name) and the relevant resource download pack can be downloaded.
This works 'fine' when on its own on a page however when I have multiple instances of it on one page they interfere with each other. Only the first one works and clicking in the 2nd 3rd etc table updates the first one. I need these to function independant of each other. I believe the problem is centering around the (this) command working across all of the tables but I can't quite figure this out with what I know of jquery.
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($j){
$j(document).ready(function() {
jQuery.noConflict() (function(){
$j(".options").each(function() {
// current td element
var tx = $j(this);
// do it once only
var val = tx.text();
tx.css('background', val ==1 ? ''
: 'url(circ.png)');
});
$j("#para").text('').append("Please make a selection");;
$j(".options").click(function(e) {
$j(".options").each(function() {
// current td element
var tx = $j(this);
// do it once only
var val = tx.text();
tx.css('background', val ==1 ? ''
: 'url(circ.png)');
});
var ProductCode = 241;
var currentCellText = $j(this).text();
var LeftCellText = $j(this).prev().text();
var RightCellText = $j(this).next().text();
var RowIndex =$j(this).parent().parent().children().index($j(this).parent());
var ColIndex = $j(this).parent().children().index($j(this));
var RowsAbove = RowIndex;
var ColName = $j(".head").children(':eq(' + ColIndex + ')').text();
var rowid = $j(this).parent().attr('id');
if(currentCellText===''){$j(this).css('background', 'url(circfill.png)');
$j("#para").text('').append( ColName +"-"+ ProductCode +"-"+ rowid +"<br />")
$j("#resourcepack").text('').append("Download Selected Resource Pack")
$j("#resourcepack").click(function(){ window.location = '241.zip'});
;}
else{$j("#para").text('').append("Incompatible Selection");
$j("#resourcepack").text('').append()
}});
});
});
});
</script>
© Stack Overflow or respective owner