Link to home
Start Free TrialLog in
Avatar of lenamtl
lenamtlFlag for Canada

asked on

Dynamic table need some condition on a TD

Hi,

I have this code to append td to my table and this is working fine

var $tr = $('<tr>').append(
															
	$('<td>').html(resultStateList.list_state_name),
	$('<td>').html(resultStateList.list_state_active),

).appendTo('#countries-list tbody');

Open in new window


What I need to do is to display different span in the active <td> depending if list_state_active is Y or N.

Something like this but I cannot make it work with the append code...

      
if ( resultStateList.list_state_active === 'Y'){
	   $('<td>').html('<span class="badge bg-green">' + '<?php echo ASLang::get('yes'); ?>' + '</span>' )
	} else if (resultStateList.list_state_active  === 'N') {
	  $('<td>').html('<span class="badge bg-red">' + '<?php echo ASLang::get('no'); ?>' + '</span>' )
	} else  {
	$('<td>').html(resultStateList.list_state_active),
       }

Open in new window


Thanks
Avatar of Jim Riddles
Jim Riddles
Flag of United States of America image

Do you have a link to a site?
Avatar of lenamtl

ASKER

No need it's just a JS question...
do something like this

var $td
if ( resultStateList.list_state_active === 'Y'){
  $td = $('<td>').html('<span class="badge bg-green">' + '<?php echo ASLang::get('yes'); ?>' + '</span>' )
} else if (resultStateList.list_state_active  === 'N') {
  $td = $('<td>').html('<span class="badge bg-red">' + '<?php echo ASLang::get('no'); ?>' + '</span>' )
} else  {
  $td = $('<td>').html(resultStateList.list_state_active),
}

var $tr = $('<tr>').append($td).appendTo('#countries-list tbody');

Open in new window

Avatar of lenamtl

ASKER

Hi @HainKurt
I'm getting the same problem error with your code
Unexpected token } after the else if

or if I remove this and just show the table without the else if I'm getting Unexpected token var
try this

var $td;
if (resultStateList.list_state_active === "Y"){
  $td = $("<td>").html("<span class='badge bg-green'>" + "<?php echo ASLang::get('yes'); ?>" + "</span>");
} else if (resultStateList.list_state_active === "N") {
  $td = $("<td>").html("<span class='badge bg-red'>" + "<?php echo ASLang::get('no'); ?>" + "</span>");
} else  {
  $td = $("<td>").html(resultStateList.list_state_active);
}

var $tr = $("<tr>").append($td).appendTo("#countries-list tbody");

Open in new window

Avatar of lenamtl

ASKER

This is working only if 1 td, but I have several td and it don't render them

$('<td>').text(resultStateList.list_country_name),
$('<td>').text(resultStateList.list_state_name),
$('<td>').text(resultStateList.list_state_code),

It's rendering only 1 td the latest one
so I cannot use this solution for my table
TRY

var $td1, $td2, $td3;

if (resultStateList.list_state_active === "Y"){
  $td1 = $("<td>").html("<span class='badge bg-green'>" + "<?php echo ASLang::get('yes'); ?>" + "</span>");
  $td2 = $("<td>").html("<span class='badge bg-green'>" + "<?php echo ASLang::get('yes'); ?>" + "</span>");
  $td3 = $("<td>").html("<span class='badge bg-green'>" + "<?php echo ASLang::get('yes'); ?>" + "</span>");
}...

var $tr = $("<tr>").append($td1).append($td2).append($td3).appendTo("#countries-list tbody");

Open in new window

Avatar of lenamtl

ASKER

Hi,

Both example you provided
only display one TD ( $('<td>').html(resultStateList.list_state_active)
not the others one (I need those td too)
  $('<td>').text(resultStateList.list_country_name),
  $('<td>').text(resultStateList.list_state_name),
  $('<td>').text(resultStateList.list_state_code),

So let's recap

this is my working original code:

var $tr = $('<tr>').append(
	                   $('<td>').text(resultStateList.list_country_name),
                           $('<td>').text(resultStateList.list_state_name),
                           $('<td>').text(resultStateList.list_state_code),
	                   $('<td>').html(resultStateList.list_state_active)
                          ).appendTo('#countries-list tbody');

Open in new window


So how can I have this condition only for this TD $('<td>').html(resultStateList.list_state_active) and be able to render also the other TD

if ( resultStateList.list_state_active === 'Y'){
	   $('<td>').html('<span class="badge bg-green">' + '<?php echo ASLang::get('yes'); ?>' + '</span>' ),
	} else if (resultStateList.list_state_active  === 'N') {
	  $('<td>').html('<span class="badge bg-red">' + '<?php echo ASLang::get('no'); ?>' + '</span>' ),
	} else  {
	$('<td>').html(resultStateList.list_state_active),
       }

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
what about

var $td1, $td2, $td3;

if (resultStateList.list_state_active === "Y"){
  $td1 = $("<td>").html("<span class='badge bg-green'>" + "<?php echo ASLang::get('yes'); ?>" + "</span>");
  $td2 = $("<td>").html("<span class='badge bg-green'>" + "<?php echo ASLang::get('yes'); ?>" + "</span>");
  $td3 = $("<td>").html("<span class='badge bg-green'>" + "<?php echo ASLang::get('yes'); ?>" + "</span>");
}...

var $tr = $("<tr>").append($td1,$td2,$td3).appendTo("#countries-list tbody");

Open in new window


see this demo, it is working fine, as long as your php is not null inside TDs

https://jsfiddle.net/dfk1775z/
also this one works fine

https://jsfiddle.net/nkyhus1e/

var $td1 = $("<td><span class='badge bg-green'>" + "X" + "</span></td>");
var $td2 = $("<td><span class='badge bg-red'>" + "Y" + "</span></td>");
var $td3 = $("<td><span class='badge bg-yellow'>" + "Z" + "</span></td>");

var $tr = $($("<tr>").append($td1).append($td2).append($td3)).appendTo("#countries-list tbody");

Open in new window


and this one works as well

var td1 = $("<td><span class='badge bg-green'>" + "X" + "</span></td>");
var td2 = $("<td><span class='badge bg-red'>" + "Y" + "</span></td>");
var td3 = $("<td><span class='badge bg-yellow'>" + "Z" + "</span></td>");

var $tr = $("<tr>").append(td1).append(td2).append(td3).appendTo("#countries-list tbody");

Open in new window


and this one

https://jsfiddle.net/98m7ert6/

var td1 = "<td><span class='badge bg-green'>" + "X" + "</span></td>";
var td2 = "<td><span class='badge bg-red'>" + "Y" + "</span></td>";
var td3 = "<td><span class='badge bg-yellow'>" + "Z" + "</span></td>";

$("#countries-list tbody").append("<tr>"+td1+td2+td3+"</tr>");

Open in new window


and this one, with one var

https://jsfiddle.net/xez3rxke/

var td = "<td><span class='badge bg-green'>" + "X" + "</span></td>";
td += "<td><span class='badge bg-red'>" + "Y" + "</span></td>";
td += "<td><span class='badge bg-yellow'>" + "Z" + "</span></td>";

$("#countries-list tbody").append("<tr>" + td + "</tr>");

Open in new window

Avatar of lenamtl

ASKER

@HainKurt you are not implementing the condition on the TD...
Your previous code example was more near of what I'm looking for but it's display only the latest col https://jsfiddle.net/lenamtl/wa49x35w/1/
I need to see all columns

@Rob I reuse one part of your code here which is ok, but how can I display the active column else where not necessarily at the end?
https://jsfiddle.net/lenamtl/5sgvud0x/1/
I did not add your all logic... it just shows how to use 3td and add it to tr and append it to table body...
do the same thing in other parts of the if/else statement...

see this

https://jsfiddle.net/nfx4jrvx/

var resultStateList = {
  list_state_name: "New York",
  list_state_code: "NY",
  list_state_active: "N"
}

var tds;
if (resultStateList.list_state_active === "Y") {
  tds = "<td><span class='badge bg-green'>" + "get('yes')" + "</span></td>";
  tds += "<td><span class='badge bg-green'>" + "y2" + "</span></td>";
  tds += "<td><span class='badge bg-green'>" + "y3" + "</span></td>";
} else if (resultStateList.list_state_active === "N") {
  tds = "<td><span class='badge bg-red'>" + "get('no')" + "</span></td>";
  tds += "<td><span class='badge bg-red'>" + "n2" + "</span></td>";
  tds += "<td><span class='badge bg-red'>" + "n3" + "</span></td>";
} else {
  tds = "<td><span class='badge bg-yellow'>" + "else" + "</span></td>";
  tds += "<td><span class='badge bg-yellow'>" + "e2" + "</span></td>";
  tds += "<td><span class='badge bg-yellow'>" + "e3" + "</span></td>";
};

var $tr = $("<tr>").append(tds).appendTo("#countries-list tbody");

Open in new window

Avatar of lenamtl

ASKER

@HainKurt I don't understand your code why you put 3 time the TD for each?? and the most important thing how can I display the others Columns ?
 
Check what I did with a part @Rob solution it's working ok, except it's display the active column at the end (last column), I need to have this column eslewhere
https://jsfiddle.net/lenamtl/5sgvud0x/1/
except it's display the active column at the end (last column), I need to have this column eslewhere

where?
Avatar of lenamtl

ASKER

in this case this will be the column before the last one
I may need to have it in second column depending of the table
just change the order

var $tr = $('<tr>').append(td,
  $('<td>').html(resultStateList.list_state_name),
  $('<td>').html(resultStateList.list_state_code),
).appendTo('#countries-list tbody');

Open in new window


or

var $tr = $('<tr>').append(
  $('<td>').html(resultStateList.list_state_name),
  td,
  $('<td>').html(resultStateList.list_state_code)
).appendTo('#countries-list tbody');

Open in new window

Avatar of lenamtl

ASKER

There is no problem with those columns, the problem is with the column that have the if

https://jsfiddle.net/lenamtl/5sgvud0x/1/
what is the problem exactly?
Avatar of lenamtl

ASKER

the column that have the IF statement (resultStateList.list_state_active)  appear as the latest column
Let say I want to display it  just before  resultStateList.list_state_code

var resultStateList = {
  list_state_name: "New York",
  list_state_code: "NY",
  list_state_active: "Y"
}

 var td = $('<td>');
  if (resultStateList.list_state_active == "Y") {
    td.html("<span class='badge bg-green'>YES</span>");
  }
  else {
    td.html("<span class='badge bg-red'>NO</span>");
  }
  
  var $tr = $('<tr>').append(
	
    $('<td>').html(resultStateList.list_state_name),
    $('<td>').html(resultStateList.list_state_code),
   
	td
  
  ).appendTo('#countries-list tbody');

Open in new window

but I gave solution for that case above @ ID: 42236269

here again...

var $tr = $('<tr>').append(td,
  $('<td>').html(resultStateList.list_state_name),
  $('<td>').html(resultStateList.list_state_code),
).appendTo('#countries-list tbody');

Open in new window

Avatar of lenamtl

ASKER

Please check the jsfiddle https://jsfiddle.net/lenamtl/5sgvud0x/1/ 
You see the latest column with the YES, how can I have it in col2 instead of col3

As the result in column 3 (YES) is the column with a IF.

PS In your example: you don't include the col with a IF or when you have it you don't include the other columns...
but I gave solution to that one as well ...

  var $tr = $('<tr>').append(
	
    $('<td>').html(resultStateList.list_state_name),
    td,
    $('<td>').html(resultStateList.list_state_code)
  
  ).appendTo('#countries-list tbody');

Open in new window

Avatar of lenamtl

ASKER

Sorry but you don't understand what the problem is,
have you take the time to check the JSfiddle ?
https://jsfiddle.net/lenamtl/5sgvud0x/1/
can you please create a excel with desired output and post here (screenshot)

as you see, depending on active_state, it puts YES/NO in 3rd column

User generated image
do you want something like this

https://jsfiddle.net/5wLyqgwj/

conditional yes/no is added into col2, and no need for col3
Avatar of lenamtl

ASKER

No

Check Jsfiddle .... https://jsfiddle.net/lenamtl/5sgvud0x/1/

I need 3 columns
You see the latest column with the YES, how can I have it in col2 instead of col3
and $('<td>').html(resultStateList.list_state_code), in col3
you want this?
User generated image
Avatar of lenamtl

ASKER

Yes!
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of lenamtl

ASKER

@HainKurt The problem is you sent code part separately, I have tried many times the code you sent and it was not working all together. It was not displaying the Yes column (if statement) OR not the other columns.

@Rob provided a simpler solution, that was working ok  except I was not able to change the column position. when I  move the [code]td,[/code] code I probably forgot to put comma after the td or did other little syntax error.

The most important now it is working ok, the way I need it...
Thanks to both of you
but every time, I posted the demo url :)
+ relevant code...
No Problem.  Glad I could help.