lenamtl
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
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...
Thanks
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');
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),
}
Thanks
Do you have a link to a site?
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');
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
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");
ASKER
This is working only if 1 td, but I have several td and it don't render them
$('<td>').text(resultState List.list_ country_na me),
$('<td>').text(resultState List.list_ state_name ),
$('<td>').text(resultState List.list_ state_code ),
It's rendering only 1 td the latest one
so I cannot use this solution for my table
$('<td>').text(resultState
$('<td>').text(resultState
$('<td>').text(resultState
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");
ASKER
Hi,
Both example you provided
only display one TD ( $('<td>').html(resultState List.list_ state_acti ve)
not the others one (I need those td too)
$('<td>').text(resultState List.list_ country_na me),
$('<td>').text(resultState List.list_ state_name ),
$('<td>').text(resultState List.list_ state_code ),
So let's recap
this is my working original code:
So how can I have this condition only for this TD $('<td>').html(resultState List.list_ state_acti ve) and be able to render also the other TD
Both example you provided
only display one TD ( $('<td>').html(resultState
not the others one (I need those td too)
$('<td>').text(resultState
$('<td>').text(resultState
$('<td>').text(resultState
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');
So how can I have this condition only for this TD $('<td>').html(resultState
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),
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
what about
see this demo, it is working fine, as long as your php is not null inside TDs
https://jsfiddle.net/dfk1775z/
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");
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/
and this one works as well
and this one
https://jsfiddle.net/98m7ert6/
and this one, with one var
https://jsfiddle.net/xez3rxke/
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");
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");
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>");
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>");
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/
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/
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");
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/
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?
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
I may need to have it in second column depending of the table
just change the order
or
var $tr = $('<tr>').append(td,
$('<td>').html(resultStateList.list_state_name),
$('<td>').html(resultStateList.list_state_code),
).appendTo('#countries-list tbody');
or
var $tr = $('<tr>').append(
$('<td>').html(resultStateList.list_state_name),
td,
$('<td>').html(resultStateList.list_state_code)
).appendTo('#countries-list tbody');
ASKER
There is no problem with those columns, the problem is with the column that have the if
https://jsfiddle.net/lenamtl/5sgvud0x/1/
https://jsfiddle.net/lenamtl/5sgvud0x/1/
what is the problem exactly?
ASKER
the column that have the IF statement (resultStateList.list_stat e_active) appear as the latest column
Let say I want to display it just before resultStateList.list_state _code
Let say I want to display it just before resultStateList.list_state
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');
but I gave solution for that case above @ ID: 42236269
here again...
here again...
var $tr = $('<tr>').append(td,
$('<td>').html(resultStateList.list_state_name),
$('<td>').html(resultStateList.list_state_code),
).appendTo('#countries-list tbody');
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...
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');
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/
have you take the time to check the JSfiddle ?
https://jsfiddle.net/lenamtl/5sgvud0x/1/
do you want something like this
https://jsfiddle.net/5wLyqgwj/
conditional yes/no is added into col2, and no need for col3
https://jsfiddle.net/5wLyqgwj/
conditional yes/no is added into col2, and no need for col3
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(resultState List.list_ state_code ), in col3
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(resultState
ASKER
Yes!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
@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...
+ relevant code...
No Problem. Glad I could help.