CODEWITHSUNDEEP
javascriptjquery
No_idea
No_idea

Reputation: 19

Same button for 2 tables selection jquery

i have a page and i got 2 tables in that page. I want to pass the value from rows to one .php page but with the same button. My code is this:

JS code:

 var flag;
function highlight(e) {


if (selected[0]){
       selected[0].className = '';  
       flag='1';
}

else if (selected2[0]){
     selected2[0].className = '';
     flag='0';
  }


   e.target.parentNode.className = 'selected';  
   alert(flag);  
   }


var table = document.getElementById('data-table'),
  selected = table.getElementsByClassName('selected');
var table2 = document.getElementById('data-table-aux'),
  selected2 = table2.getElementsByClassName('selected');



table.onclick = highlight;
table2.onclick=highlight;

$("#tst").click(function(){
   if(flag=='1'){
  var value =$(".selected td:first").html();
  value = value || "Nenhuma coluna selecionada";
   window.open("info_detalhada.php?   data2="+value,'_blank','toolbar=0,location=no,menubar=0,height=550,width=650,lef t=200, top=300');  }
    else if(flag=='0'){
  var value =$(".selected td:first").html();
   value = value || "Nenhuma coluna selecionada";
    window.open("info_detalhada2.php?    data2="+value,'_blank','toolbar=0,location=no,menubar=0,height=550,width=650,lef t=200, top=300');
         }

});

HTML CODE

creating 2 tables

<table  style="float: left" id="data-table"></table>
<table style="float: left" id="data-table-aux"></table>

(Dynamic tables )

button:

<input type="button" id="tst" value="Detailed information"  />

The problem is that first time i select a row the variable flag will have the old value and not the new value from click. For example, first time i click a row flag = undefined , second time got the value of the table selected (0 or 1) , if i click on other row the flag wont change and will got the old value (or 0 or 1).

Any tips ? Thanks

edited: i didnt put the html in first place because i dont think it's an html solution, I dont have a fiddle created because i'm using dynamic table's but i will try to make a fiddle with my example and i will put here when it's done ;)

Fiddle : https://jsfiddle.net/gwg639Lf/9/

Upvotes: 1

Views: 139

Answers (3)

Penman
Penman

Reputation: 173

You're setting the class name of the element after the condition statement. Hence, the first time, your flag variable is undefined.

Try putting it in the beginning of the highlight function.

function highlight(e) {

 e.target.parentNode.className = 'selected';  

 if (selected[0]){
   selected[0].className = '';  
   flag='1';
 } 

 else if (selected2[0]){
    selected2[0].className = '';
    flag='0';
 }
 alert(flag);  
}

JsFiddle: https://jsfiddle.net/gwg639Lf/10/

Edit:

Add it before and after the condition. Adding it before the condition gives you the class name to initialize the flag variable. Adding it after gives the formatting bar.

JsFiddle: https://jsfiddle.net/gwg639Lf/13/

Upvotes: 0

No_idea
No_idea

Reputation: 19

Ok, after some tests on Kostas Pelelis functions, i found a solution that is valid for my problem.

here is the code of JS:

var flag;

$("#data-table tr").click(function(){
 $("#data-table-aux     tr").addClass('selected').siblings().removeClass('selected');  
   $(this).addClass('selected').siblings().removeClass('selected');    
   flag='1';
});

$("#data-table-aux tr").click(function(){
    $("#data-table tr").addClass('selected').siblings().removeClass('selected');  
   $(this).addClass('selected').siblings().removeClass('selected');    
   flag='0';
});


$('#tst').on('click', function(e){
   if (flag=='1')
   alert($("#data-table tr.selected td:first").html());
   else if (flag=='0')
    alert($("#data-table-aux tr.selected td:first").html());
});

Here is the fiddle --> fiddle

Thank you all for the help ;)

Upvotes: -1

Kostas Pelelis
Kostas Pelelis

Reputation: 1342

Let me suggest a more generic approach

First of all wrap your tables in a div

<div class="data-tables">
    <table  style="float: left" id="data-table"></table>
    <table style="float: left" id="data-table-aux"></table>
</div>

Then delegate the click event handlers

$('.data-tables').delegate('table', 'click', function(event) {
  $this = $(this)
  $this.addClass('active').removeClass('inactive')
  $this.siblings().addClass('inactive').removeClass('active')
});

This function does the following:

  • Add class active and remove inactive (if exists) to the selected item/table
  • Remove the class active and add class inactive from all adjacent tables

In this way you will only have one active table at the time

Then declare your button handler

$("#tst").click(function(){
    var value = $('.active').html()
    // Use the value as you want
})

This code will work no matter how many tables you add to the div

Upvotes: 2

Related Questions