td without parent table tag
Question
HTML:
<td class="tabletd"> text one </td><br>
<td class="tabletd" id="tdSecond"> this is next td</td>
<button onclick="myFunc()">click</button>
JS:
function myFunc() {
var second = document.getElementById('tdSecond').innerHTML;
//var second2 = document.getElementsByTagName('td')[1]; //gives error undefined
alert(second);
}
I cannot make this work. Even there is no effect of css see JSFiddle .
But both javascript and css work fine if we use <li> without its parent <ul> .
And also javascript and css work fine on custom tag. for eg:- <ddd> text </ddd>
So why we get error on both css and javascript if we use <td> without its parent <table> ?
3 answers
solution1
4 2012-12-19 07:01:58
This would explain why <li> items can be without <ul>
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-li-element
The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.
If the parent element is an ol element, then the li element has an ordinal value.
<ul> is merely meant to group similar <li> items. Without the <ul> , a <li> is just an individual list item that is not grouped whatsoever. So having a <li> without a <ul> is still valid markup that the parser will pass.
<td> and <tr> elements specifically have to reside within a <table> element. http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element
This is how tables are formed by the parser and having a <td> without a <table> will throw a table model error:
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#table-model
This test shows:
<!-- fail -->
<tr>
<td>tr_td_test</td>
</tr>
<!-- fail -->
<td>td_test</td>
<!-- pass as a regular list item -->
<li>li_test</li>
<!-- pass and tr tag is added to DOM -->
<table>
<td>table_td_test 1</td>
</table>
<!-- pass and td tag is added to DOM -->
<table>
<tr>
table_tr_test_1
</tr>
</table>
solution2
3 ACCPTED 2012-12-19 05:25:47
If you inspect the element in chrome you will notice the code has changed to the following:
<body>
text one <br>
this is next td
<button onClick="myFunc()">click</button>
<script type="text/javascript">//<![CDATA[
function myFunc() {
var second=document.getElementById('tdSecond').innerHTML;
alert(second);
//var second2=document.getElementsByTagName('td')[1].innerHTML;
//alert(second2);
}
//]]>
</script>
</body>
The td elements have been stripped by the browser as they are not valid.
solution3
-2 2012-12-19 05:23:39
Try this.There are html problems. try this html
<table border="1">
<tr>
<td class="tabletd"> text one </td><br>
<td class="tabletd" id="tdSecond"> this is next td</td>
</tr>
</table>
<button onclick="myFunc()">click</button>
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.