没有父表标签的td

时间:2012-12-19 05:20:27

标签: javascript html css html-table

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上出错?

3 个答案:

答案 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>