CODEWITHSUNDEEP
javascriptjqueryhtml
user948105
user948105

Reputation:

(JQuery) 'table.class' doesn't work and i can't figure out why. It selects tables with other classes too

My code is pretty much self-explanatory. Please take a look:

<html>
<body>

<!-- importing the latest jquery (1.6.4) here -->    

<table class="notThisOne" cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 20px;">
<colgroup>
<col>
</colgroup>
<tbody>
<tr class="not">
<td>
</td>
<td>
<b>Nicholas O'Reilly</b>
</td>
<td></td>
<td>[email protected] </td>
<td></td>
</tr>
<tr class="not">
<td>
</td>
<td>
<b>John Smith</b>
</td>
<td></td>
<td>[email protected] </td>
<td></td>
</tr>
</tbody>
</table>



<table class="contactListRow" cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 20px;">
<colgroup>
<col>
</colgroup>
<tbody>
<tr class="contactListRow">
<td>
</td>
<td>
<b>Nicholas O'Reilly</b>
</td>
<td></td>
<td>[email protected] </td>
<td></td>
</tr>
<tr class="contactListRow">
<td>
</td>
<td>
<b>John Smith</b>
</td>
<td></td>
<td>[email protected] </td>
<td></td>
</tr>
</tbody>
</table>

<br><br>

<script type="text/javascript">



$('table.contactListRow').each(function(i) {

    $name = "";
    $email = "";

    $('td').each(function(ii) {
        $col = ii%5;

        if( $col == 1){
            $name = $(this).text();
        }

        if( $col == 3){
            $email = $(this).text();
        }

        if( $col == 4){
            //$(this).html('<a href="javascript: openwindow(\'https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=&quot;'+$name+'&quot; &lt;'+$email+'&gt;\')">Email</a>');
            $(this).text(i+"_"+ii);
        }

    });

});

</script>

</body>
</html>

The problem is that any table gets altered, even if the class is not the one specified.

What's wrong?

Thanks in advance.

PS: I only need it running on Firefox 6+ (its for personal use only).

Upvotes: 0

Views: 1584

Answers (4)

nnnnnn
nnnnnn

Reputation: 150080

The problem is that you are selecting all <td> elements with this line:

$('td').each(function(ii) {

Instead of that you can use find to look within the table that was already selected, something like this:

$(this).find('td').each(function(ii) {

(Or, to select all <td> elements that belong to a table of the specified class you could say $('table.contactListRow td').each(function(ii) {.)

Upvotes: 1

Larry K
Larry K

Reputation: 49114

   $('td').each(function(ii)

won't this change every td element?

Maybe something more like

xxxxx

Nevermind, I'm not yet doing much jScript, my solution is probably not right.

Upvotes: 1

mu is too short
mu is too short

Reputation: 434785

Your problem is right here:

$('td').each(function(ii) {

Your $('td') selects all table cells whether they're in the table you want or not. So you're not quite altering every table so much as you are (accidentally) altering every table cell.

Try using $(this).find('td') instead, that will limit your table cell selector to those that are within the tables that you're interested in.

Upvotes: 1

Sang Suantak
Sang Suantak

Reputation: 5265

Change this line

$('td').each(function(ii) {

to

$(this).find('td').each(function(ii) {

Upvotes: 3

Related Questions