(JQuery) 'table.class' doesn't work and i can't figure out why. It selects tables with other classes too
Question
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>nikoreilly@hotmail.com </td>
<td></td>
</tr>
<tr class="not">
<td>
</td>
<td>
<b>John Smith</b>
</td>
<td></td>
<td>jsmithjr@gmail.com </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>nikoreilly@hotmail.com </td>
<td></td>
</tr>
<tr class="contactListRow">
<td>
</td>
<td>
<b>John Smith</b>
</td>
<td></td>
<td>jsmithjr@gmail.com </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="'+$name+'" <'+$email+'>\')">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).
4 answers
solution1
3 ACCPTED 2011-09-16 04:06:56
Change this line
$('td').each(function(ii) {
to
$(this).find('td').each(function(ii) {
solution2
1 2011-09-16 04:06:56
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.
solution3
1 2011-09-16 04:07:12
$('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.
solution4
1 2011-09-16 04:09:31
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) { .)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.