CODEWITHSUNDEEP
javascriptjqueryhtmldomhtml-table
genesis
genesis

Reputation: 50982

Why isn't jquery's .html() working on <td></td>?

I have this code:

<script> 
function del(a){
        alert(a);
        alert($("#"+a).html());
        alert($("#td").html());
            alert($("#div").html());
}
</script> 
<td id="td">wtf</td> 
<div id="div">wtf</div> 
<table> 
   <tr>
       <td id="bbbbb">test</td><td><span onclick="del('bbbb');">click</span></td>
   </tr>
</table>

Alerts are

bbbbb
test
null
wtf

td content is marked as null (ignored) ?

Why?

proof http://sandbox.phpcode.eu/g/743de.php

UPDATE:

look here and my alert gives me null, too

Upvotes: 3

Views: 5745

Answers (7)

gen_Eric
gen_Eric

Reputation: 227310

First off, you cannot have <td> elements outside of a table, but it seems in your update, you've fixed that.

In your latest update, the fiddle you posted returns null because of how jQuery selectors work. The ID you are looking for is "5c192.php", so when you do $('#'+a) it becomes $('#5c192.php'), which is being interpreted as 'ID=5c192' and 'class=php', because . is a class selector.

Change $('#'+a) to$('[id="'+a+'"]').

Upvotes: 5

Thomas Shields
Thomas Shields

Reputation: 8943

You're calling del("bbbb") but the id of the <td> is "bbbbb", with five b's. Not sure if this is your issue though. Also, you can't have a <td> outside of a table, which is probably why the $("#td") is messing up. Try:;

<script> 
function del(a){
        alert(a);
        alert($("#"+a).html());
        alert($("#td").html());
            alert($("#div").html());
}
</script> 

<div id="div">wtf</div> 
<table> 
   <tr>
       <td id="bbbbb">test</td><td><span onclick="del('bbbbb');">click</span></td>
<td id="td">wtf</td> 
   </tr>
</table>

Edit

a td is not valid outside of a table. If you look at the generated output via the web inspector you'll see that the td has been stripped out and it's content placed on the page as plain text. The td is invalid there and thus trying to get to it via JS is going to prove difficult and not a good idea.

Upvotes: 3

Joe
Joe

Reputation: 82654

That floating <td> element is not valid and basically gets parsed out into 

 wtf

without the invalid td elements. Change it to a span, div, etc. it will work. In addition to the missing b

UPDATE:

In your jsFiddle you have an invalid ID of 5c192.php. Specifically, not starting with a letter. From What are valid values for the id attribute in HTML?

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Although, I would remove the period as well.

Upvotes: 2

Yiğit Yener
Yiğit Yener

Reputation: 5986

alert($("#"+a).html());

is null because you are passing an invalid id.

alert($("#td").html());

is null because the element td is not valid html in its context.

Edit: Your code works fine there. Just your id is not valid this time. Can't start with numeric.

Upvotes: 5

bozdoz
bozdoz

Reputation: 12880

Should enclose TDs in TABLE tags.
Like this example: jsfiddle

Upvotes: 3

Johan
Johan

Reputation: 3212

Since bbbbb (5x) and bbbb(4x) are different.

Upvotes: 1

gred
gred

Reputation: 537

The first td (the one with the id="td") is outside of a table (tds are always supposed to be inside a table) and you call the function del giving a string with 4 b, bbbb while your td has 5 d, ddddd.

Upvotes: 1

Related Questions