Using an if statement while constructing a table

Question

I am producing a dynamic table based on the result of an ajax call. I must change the background colour of one cell depending on the result of the if statement. Does anyone know how this can be done.

My code for producing the table

var today = "<?php echo $Today;?>";
var enddate = todate + " " + totime;

console.log("End date", enddate);


var tr_str = "<tr class='TableText'>" +
    "<td style='color:#333;font-size:0.8em;'>" + promotionname + "</td>" +
    "<td  style='color:#333;font-size:0.8em;'>" + deviceid + " " + screenlocation + "</td>" +
    "<td align='center'  style='color:#333;font-size:0.8em;'>" + orientation + "</td>" +
    "<td  style='color:#333;font-size:0.8em;'>" + promotionimage + "</td>" +
    "<td  align='center'  style='color:#333;font-size:0.8em;'>" + mediatype + "</td>" +
    "<td  style='color:#333;font-size:0.8em;'>" + fromdate + "</td>" +
    "<td  style='color:#333;font-size:0.8em;'>" + todate + "</td>" +

// HOW CAN I PLACE AN IF STATEMENT HERE
if (enddate < today) {
    "<td align='center' style='color:#333;font-size:0.8em;' class='Complete'>Complete</td>" +
} else {
    "<td align='center' style='color:#333;font-size:0.8em;' class='Scheduled'>Scheduled</td>" +
}

"<td align='center'  style='color:#333;font-size:0.8em;'><input type='button' name='edit' value='Edit' id=" + (i + 1) + " class='btn btn-info btn-xs btn-block edit_data'></td>" +
    "</tr>";
$("#userTable tbody").append(tr_str);

Many thanks in advance for your time and help.

The answers below have this question covered, however you should really avoid putting inline styling in to HTML. Especially repeated rules as on your td elements. Look in to using classes and external stylesheets. — Rory McCrossan
– Rory McCrossan, Commented Feb 13, 2019 at 18:51
Following up on this question. How did the provided answers work out? Did you have any other problems, any further assistance we can render regarding this question? — cssyphus
– cssyphus, Commented Feb 22, 2019 at 21:15

Rory McCrossan · Accepted Answer · 2019-02-13 18:50:17Z

3

If I got your question correct. You want to append the based on conditions to a row string variable, Which can be achieved as follows. You should complete the statement assigning the initial html to tr_str variable by removing the + at the end and terminate with ;

Then change the code inside condition block as follows

// HOW CAN I PLACE AN IF STATEMENT HERE
if(enddate < today ) {
    tr_str = tr_str + "<td align='center' style='color:#333;font-size:0.8em;' class='Complete'>Complete</td>";
} else {
    tr_str = tr_str +"<td align='center' style='color:#333;font-size:0.8em;' class='Scheduled'>Scheduled</td>" +
}

edited Feb 13, 2019 at 18:50

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Feb 13, 2019 at 18:42

KB5

1283 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cssyphus Over a year ago

Good answer - +1. Note that to include code in your question, you can either prefix each line of code with 4 spaces (or one tab), or add back-ticks around the code string (the code snippet must all be on one line, so best used for a word or a short fragment).

cssyphus · Accepted Answer · 2019-02-13 19:21:08Z

2

I don't know the format of your date-time variables, so cannot confirm the if(enddate < today) code to check if one date is earlier than the other, but you can probably handle that part. To answer your specific question:

You are creating a variable that contains HTML code. At the point of the IF statement: (a) stop creating the tr_str variable (i.e. end with a semi-colon), (b) perform the IF statement (appending the appropriate string to the tr_str variable), and (c) continue appending to the variable:

var today = "<?php echo $Today;?>";
var enddate = todate + " " + totime;

console.log("End date", enddate);


var tr_str = "<tr class='TableText'>" +
"<td style='color:#333;font-size:0.8em;'>" + promotionname + "</td>" +
"<td  style='color:#333;font-size:0.8em;'>" + deviceid + " " + screenlocation + "</td>" +
"<td align='center'  style='color:#333;font-size:0.8em;'>" + orientation + "</td>" +
"<td  style='color:#333;font-size:0.8em;'>" + promotionimage + "</td>" +
"<td  align='center'  style='color:#333;font-size:0.8em;'>" + mediatype + "</td>" +
"<td  style='color:#333;font-size:0.8em;'>" + fromdate + "</td>" +
"<td  style='color:#333;font-size:0.8em;'>" + todate + "</td>";

// HOW CAN I PLACE AN IF STATEMENT HERE
if(enddate < today ) {
    tr_str += "<td align='center' style='color:#333;font-size:0.8em;' class='Complete'>Complete</td>" +
} else {
    tr_str = += "<td align='center' style='color:#333;font-size:0.8em;' class='Scheduled'>Scheduled</td>" +
}

tr_str += "<td align='center'  style='color:#333;font-size:0.8em;'><input type='button' name='edit' value='Edit' id=" + (i+1) + " class='btn btn-info btn-xs btn-block edit_data'></td>" +
"</tr>";
$("#userTable tbody").append(tr_str);

edited Feb 13, 2019 at 19:21

answered Feb 13, 2019 at 18:42

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

3 Comments

DCJones Over a year ago

This is the code I used. if(enddate < today ) { tr_str += "<td align='center' style='color:#333;font-size:0.8em;' class='Scheduled'>Scheduled</td>"; } else { tr_str += "<td align='center' style='color:#333;font-size:0.8em;' class='Active'>Active</td>"; }

DCJones Over a year ago

the enddate and today dates are in the format of d-m-Y H:i. When I run my script all the records are displayed as "complete". Do I have the "if(enddate < today ) {" part right?

cssyphus Over a year ago

No. Just above the IF statement you need to convert each date to a javascript date object. Then you can compare them and determine which is larger than the other. See this and this

Collectives™ on Stack Overflow

Using an if statement while constructing a table

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related