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: 239

Filed under:
|
|

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

Related posts about jQuery

Related posts about table