How to change the bgcolor of tr from td

Question

I have a recurring table rows.

 <table id="ads-content"><tr class="<?php
        if ($i & 1) {
            echo'alternate';
        } else {
            echo '';
        }
   ?>"> 

   <td align="left"><?php echo $i; ?></td>
      <td align="left">
              //some code to retrieve and print db values. at here $pcount is initialized. I can't initialize $pcount before tr.
             </td> 
                <td><?php
                    if ($pcount != 1) {
                        echo "<img  src='" . plugin_url('images/pencil2.png') . "'>";
                    } else {

                        echo "<img  src='" . plugin_url('images/tick.jpg') . "'>";
        }
                    ?> </td>
                       </tr></table>

Problem:

I need to change the bg color of <tr> in which contains the image "tick.jpg".

I tried so many ways but nothing fills the whole row.

How can I do this?

Answer

I fixed it. I will share the code I used to fix below so that it will help some other persons:

     <table id="ads-content"><tr class="<?php
            if ($i & 1) {
                echo'alternate';
            } else {
                echo '';
            }
       ?>"> 
            <td align="left"><?php echo $i; ?></td>
              <td align="left">
                      //some code to retrieve and print db values. at here $pcount is initialized.i can't initialize $pcount before tr.
                     </td> 
                        <td><?php
                            if ($pcount != 1) {
                                echo "<img  src='" . plugin_url('images/pencil2.png') . "'>";
                            } else {
                <div class="to_class" style="display=none;"><?php echo "new"; ?></div>
                                echo "<img  src='" . plugin_url('images/tick.jpg') . "'>";
                }
                            ?> </td>
                               </tr></table>  
 <script type="text/javascript">
 $(function(){
   $('#ads-content tr').each(function() {
       var obtained= $(this).find("td").eq(2).find(".to_class").text();
       $(this).addClass(obtained);
       });
      });
   </script>

Note: eq() starts from zero, then I gave background colour for class "new" in the css part.

can you not use the same `if($pcount != 1)` statement to apply a class to the `` and then give that a background colour? in the same way that you're applying the `alternate` class — haxxxton, Apr 03 '14 at 11:35
i tried that friend. but the $pcount value is setting on the 2nd . — user3493407, Apr 03 '14 at 11:38
why not initialise the pcount at the beginning of the row - until you show us the code that gets pcount we won't know why you can't just call it at the start — Pete, Apr 03 '14 at 11:45

b4ttl3m4st3r · Answer 1 · 2014-04-03T12:28:44.137

IMHO if you cannot init the $pcount before you actually print the TR, you should definitely think about changing this. You do something wrong. Maybe this will help:

//HERE: some code to retrieve
$output = '';
if ($pcount != 1) {
    $output .= '<tr style="background:#FFF;">';
} else {
    $output .= '<tr style="background:#AAA;">';
}
$output .= '<td align="left">'; 
$output .= ''; // HERE: print db values.
$output .= '</td>';
$output .= '</tr>';
echo $output;

Otherwise, if you cannot help it at all, you can do with jQuery e.g.:

$('tr').each(function() {
    if( $(this).find('img[src="images/tick.jpg"]').length > 0 ) {
        $(this).css('background','#FFF'); 
    } else {
        $(this).css('background','#AAA');
    }
});

OP states in his question "at here $pcount is initialized. i can't initialize $pcount before tr", so thanks for the JS solution too — haxxxton, Apr 03 '14 at 12:50

CaptainCarl · Answer 2 · 2014-04-03T12:48:02.570

0

Since you add an image both times. Add a different class to the tick.jpg image trace it back by jQuery, I suppose.

<img src="tick.jpg" class="tick_img">

$('.tick_img').parents('tr').css('background', 'red');

edited Apr 03 '14 at 12:48

answered Apr 03 '14 at 12:41

CaptainCarl

3,411
6
38
71

OP isnt looking for an odd versus even solution otherwise they would use their `.alternate` class already being applied – haxxxton Apr 03 '14 at 12:45
you'll need to call `.parent()` twice to get up to the `tr` or use `.closest('tr')` – haxxxton Apr 03 '14 at 12:48

haxxxton · Answer 3 · 2014-04-03T12:58:31.220

-1

put $i in the <tr> as something like id="row-id-<?php echo $i; ?>"

then inside the if($pcount != 1) include something like:

<style type="text/css" scoped> /* added for future proofing */
    #row-id-<?php echo $i; ?>{
        background-color:red;
    }
</style>

edited Apr 03 '14 at 12:58

answered Apr 03 '14 at 11:44

haxxxton

6,422
3
27
57

Inline styles and style tags in the page are bad, m'kay? – CaptainCarl Apr 03 '14 at 12:42
cross browser, no JS solution given OP cant change the order of his GET code – haxxxton Apr 03 '14 at 12:46
When having 500 records you would have 500 opening and closing ` – CaptainCarl Apr 03 '14 at 12:50
I would love to see documentation about how id's in css are a "no-no" if used correctly. They are designed to target individual items on the page (hence the naming convention that i suggested). as for in body `style` tags.. this solution would say otherwise http://stackoverflow.com/a/16844668/648350 – haxxxton Apr 03 '14 at 12:55
Inline styles are different than in body style tags. You would just create 500 of them which wouldn't make sense. About the ID's; I guess it's a matter of (conventional) taste more than a rule of thumb. – CaptainCarl Apr 03 '14 at 13:09
i suppose if we had OP's full `php` code we could collect the id's generated in an array and then output them into a single `style` tag after the initial loop had completed. But we dont. I totally agree with inline styles (was why i didnt understand you bringing them up in your first comment), as I understand about the potential complications with screen readers etc. However, in body style tags dont have accessibility, validation or cross-browser issues, like you said it comes down to "taste", and this solution doesnt require JS. (I am assuming "taste" shouldnt be a reason for a downvote?) – haxxxton Apr 03 '14 at 13:14

How to change the bgcolor of tr from td

3 Answers3