CODEWITHSUNDEEP
javascriptphphtml
Doctor Who
Doctor Who

Reputation: 792

Set color to tr dynamically

I am working on a php project where I have a calender and some dates coming from database. when I select date from calender then data which is coming from database gets highlighted. But this does not work for all dates. Through javascript I am able to add background color but its not display. I am doing this from javascript.

here is my code for javaScript

<script type="text/javascript">
    var cal_1 = new Calendar({
        element: 'calendar_1',
        inline: true,
        months: 3,
        dateFormat: 'm/d/Y',
        onSelect: function (element, selectedDate, date, cell) {
        debugger;

            var sd =selectedDate.split("/");
            var newdate = sd[2]+"-"+sd[1]+"-"+sd[0];
            var startDate = "startDate";
            var count = document.getElementById('countResult').value;
            for(var i=1; i<= count;i++)
            {
             var start_date = document.getElementById(startDate+i).value;
             var month = sd[0]-1;
             var selectedDate = new Date(ss[2],month,ss[1]);
             var splittedDate = start_date.split("-");
             var startDateInTextBox = new Date(splittedDate[0],splittedDate[1]-1,splittedDate[2]);
             if(selectedDate.valueOf() === startDateInTextBox.valueOf())
             {

                document.getElementById("tr_id"+i).style.backgroundColor = "lightGreen";

             }
             else
             {
                document.getElementById("tr_id"+i).style.backgroundColor = "#FFFFFF";
             }
            }

            document.getElementById('date_1').value = newdate;


        }
    });


    </script>

But when I check my html I can see That background color has been added to tr but it not display the color. Can someone help me out.

Thanks in advance.

Upvotes: 0

Views: 69

Answers (1)

Sigismundus
Sigismundus

Reputation: 625

TR is full of TD's and the color is not visible (behind TDs). Use below:

if (selectedDate.valueOf() === startDateInTextBox.valueOf())
{
   var tr = document.getElementById("tr_id"+i);
   var tds = tr.children;
   for (var i = 0; i < tds.length; i++) {
     var td= tds[i];
     td.style.backgroundColor = "lightGreen";
   }
}

Upvotes: 3

Related Questions