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, Feb 13 '19 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, Feb 22 '19 at 21:15

score 3 · Accepted Answer · edited Feb 13 '19 at 18:50

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 '19 at 18:50

Rory McCrossan

331,213
40
305
339

answered Feb 13 '19 at 18:42

KB5

128
3
12

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 Feb 13 '19 at 18:48

cssyphus · Answer 2 · 2019-02-13T19:21:08.847

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);

This is the code I used. if(enddate < today ) { tr_str += "Scheduled"; } else { tr_str += "Active"; } — DCJones, Feb 13 '19 at 19:26
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? — DCJones, Feb 13 '19 at 19:56
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](https://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript) and [this](https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript) — cssyphus, Feb 13 '19 at 20:42

Using an if statement while constructing a table

2 Answers2