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);
}
我无法完成这项工作。即使css没有效果,也可以看JSFiddle。
但是如果我们使用<li>
而不使用其父<ul>
,则javascript和css都可以正常工作
而且javascript和css在自定义标签上工作正常。例如: - <ddd> text </ddd>
那么,如果我们使用<td>
而不使用其父<table>
,我们会在css和javascript上出错?
答案 0 :(得分:4)
这可以解释为什么<li>
项可以没有<ul>
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-li-element
li元素表示一个列表项。如果它的父元素是ol, ul或menu元素,则元素是父项的项 元素列表,为这些元素定义。否则,列表 item没有与任何其他li元素定义列表相关的关系。
如果父元素是ol元素,则li元素具有 序数值。
<ul>
仅用于对类似的<li>
项进行分组。如果没有<ul>
,则<li>
只是一个未分组的单个列表项。因此,如果<li>
没有<ul>
仍然是解析器将通过的有效标记。
<td>
和<tr>
元素必须位于<table>
元素中。
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element
这就是解析器形成表的方式,如果<td>
没有<table>
则会抛出表模型错误:
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#table-model
此测试显示:
<!-- 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>
答案 1 :(得分:3)
如果您检查chrome中的元素,您会注意到代码已更改为以下内容:
<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>
td元素已被浏览器剥离,因为它们无效。
答案 2 :(得分:-2)
试试这个。有HTML问题。试试这个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>