CODEWITHSUNDEEP
javascriptphpjqueryhtml
Nimit Desai
Nimit Desai

Reputation: 23

Change TD Element in jQuery

I'm creating a webpage with announcements which pulls from the database. Here is my HTML code

<table width="100%" border="0">
<?php while($row = mysql_fetch_array($result)){ ?>
   <tr>
      <td id="maintitle" style="font-size: 34px; font-weight: bold;"><?php print  $row['title'];   ?></td>
   </tr>
   <tr>
      <td id="maincontent"><?php print $row['content'];?></td>
   </tr>
   <tr>
      <td id="mainname" style="font-size: 12px; font-style: italic;"><?php print $row['name'];?></td>
   </tr>
   <tr>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
   </tr>
<?php }?>
</table>

What I want, is for the TD element to display a particular text if there are not announcements and I've decided to use jQuery for that. Here is my code for it

<script type="text/javascript">
   $(document).ready(function(){
      $('#maintitle',this).each(function(){
         if($(this).html() != '');
            $(this).append("No Incidents recorded!");
      });
   });
</script>

However, even when there are no announcements in database, nothing happens. I was wondering if there is a different way to go about it, or changing the jquery code.

Upvotes: 2

Views: 103

Answers (2)

Vytautas Lozickas
Vytautas Lozickas

Reputation: 226

First of all, your jQuery script is doing an absolute opposite of what you want (if I understood your question correctly) - it appends the text if there IS a value in the element. The main logic problem is in the if statement:

if($(this).html != '');
    $(this).append("No Incidents recorded!");

...and that says "if the inner html in the element is NOT empty - append the string..."

It should be:

if($(this).html() === '') {
    $(this).append("No Incidents recorded!");
}

I should point out other problems with your code even if it's not related to the question:

  • As Mark B pointed out in the comment you are outputting the same id values in every iteration of the loop (W3 specification). Solution - use the class attribute.

  • You're terminating the if statement immediately so it has no effect on the following code:

    if($(this).html != '');

    should be:

    if($(this).html() === '') {
    // execute this code when the if statement resolves to true.
}

  • This line in your script is wrong because you need to call the $ function and what you are doing is referencing the $document variable which does not exist in jQuery:

    $document.ready(function(){

    should be:

    $(document).ready(function () {

  • You don't really need a second argument (this) in the jQuery function here, because passing this as a context makes no sense here:

    $('#title',this).each(function(){

  • You should add parentheses after html, because it's a function - not a property:

    if($(this).html != '');

    should be:

    if($(this).html() ...

Some more points to consider (not much of an error, just some tips):

  • Use alternative syntax when using loops or other php constructs combined with html (just makes code much cleaner):

    <?php while(expression):?>
<a href="#">example link</a>
...
<?php endwhile ?>

  • Use a shorthand version of <?php echo ... ?> or <?php print ... ?>:

    <?= 'some string...' ?>

Happy coding!

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

I think this a code you want -- you have to loop through tr not td

$(document).ready(function(){
      $('table tr').each(function(){
          if($(this).find('td').html() == ''){
            $(this).find('td').html("No Incidents recorded!");
          }
      });
   });

DEMO

Upvotes: 1

Related Questions