diff options
Diffstat (limited to 'files/zh-cn/web/api/htmltableelement/index.html')
| -rw-r--r-- | files/zh-cn/web/api/htmltableelement/index.html | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmltableelement/index.html b/files/zh-cn/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..a4c1f7ee7e --- /dev/null +++ b/files/zh-cn/web/api/htmltableelement/index.html @@ -0,0 +1,130 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - API + - DOM + - Interface + - Reference +translation_of: Web/API/HTMLTableElement +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><strong><code>HTMLTableElement</code></strong> 接口在常用的 {{DOMxRef("HTMLElement")}} 接口的基础上，提供了专门的属性和方法来处理 HTML 文档中表格的布局与展示。通过继承，它也可以访问父接口 {{DOMxRef("HTMLElement")}} 中的成员。</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="属性">属性</h2> + +<p><em>继承自父接口，{{DOMxRef("HTMLElement")}}。</em></p> + +<dl> + <dt>{{DOMxRef("HTMLTableElement.caption")}}</dt> + <dd>这是一个 {{DOMxRef("HTMLTableCaptionElement")}} ，表示作为子元素中的第一个 {{HTMLElement("caption")}} ，如果找不到则为 <code>null</code>。当设置此属性时，如果给出的对象不是一个 <code><caption></code>，一个带有 <code>HierarchyRequestError</code> 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象，它会被作为第一个子元素插入DOM树中，同时子元素中的第一个 <code><caption></code> 会被移除，如果存在的话。</dd> + <dt>{{DOMxRef("HTMLTableElement.tHead")}}</dt> + <dd>这是一个 {{DOMxRef("HTMLTableSectionElement")}}，表示子元素中的第一个 {{HTMLElement("thead")}}，如果找不到则为 <code>null</code> 。当设置此属性时，如果给出的对象不是一个 <code><thead></code>， 一个带有 <code>HierarchyRequestError</code> 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象，它会被立即插入到DOM树中既不是 {{HTMLElement("caption")}} 也不是 {{HTMLElement("colgroup")}} 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话），同时子元素中的第一个 <code><thead></code> 会被移除，如果存在的话。</dd> + <dt>{{DOMxRef("HTMLTableElement.tFoot")}}</dt> + <dd>这是一个 {{DOMxRef("HTMLTableSectionElement")}}， 表示子元素中的第一个 {{HTMLElement("tfoot")}}，如果找不到则为 <code>null</code>。当设置此属性时，如果给出的对象不是一个 <code><tfoot></code>，一个带有 <code>HierarchyRequestError</code> 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象，它会被立即插入到DOM树中既不是 {{HTMLElement("caption")}}、{{HTMLElement("colgroup")}} 也不是 {{HTMLElement("thead")}} 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话），同时子元素中的第一个 <code><tfoot></code> 会被移除，如果存在的话。</dd> + <dt>{{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}</dt> + <dd>返回一个实时的 {{DOMxRef("HTMLCollection")}}，它包含元素中的所有行，也就是子元素中的所有 {{HTMLElement("tr")}}，或者是 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}} 和 {{HTMLElement("tfoot")}} 三者子元素中的其中一个子元素。<code><thead></code> 中的行会按照DOM树的顺序出现在首位，<code><tbody></code> 中的行出现在末位，也会按照DOM树的顺序。<code>HTMLCollection</code> 对象是实时的，当 <code>HTMLTableElement</code> 发生变化时会自动更新。</dd> + <dt>{{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}</dt> + <dd>返回一个实时的 {{DOMxRef("HTMLCollection")}}，它包含元素中所有的 {{HTMLElement("tbody")}}。<code>HTMLCollection</code> 对象是实时的，当 <code>HTMLTableElement</code> 发生变化时会自动更新。</dd> +</dl> + +<h3 id="过时的属性">过时的属性</h3> + +<div class="blockIndicator warning"> +<p><strong>警告：以下属性已经过时，应当避免使用它们。</strong></p> +</div> + +<details> +<dl> + <dt>{{DOMxRef("HTMLTableElement.align")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing an enumerated value reflecting the {{HTMLAttrxRef("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.</dd> + <dt>{{DOMxRef("HTMLTableElement.bgColor")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the background color of the cells. It reflects the obsolete {{HTMLAttrxRef("bgColor", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.border")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{HTMLAttrxRef("border", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.cellPadding")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{HTMLAttrxRef("cellpadding", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.cellSpacing")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{HTMLAttrxRef("cellspacing", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.frame")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{HTMLAttrxRef("frame", "table")}} attribute and can take one of the following values: <code>"void"</code>, <code>"above"</code>, <code>"below"</code>, <code>"hsides"</code>, <code>"vsides"</code>, <code>"lhs"</code>, <code>"rhs"</code>, <code>"box"</code>, or <code>"border"</code>.</dd> + <dt>{{DOMxRef("HTMLTableElement.rules")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{HTMLAttrxRef("rules", "table")}} attribute and can take one of the following values: <code>"none"</code>, <code>"groups"</code>, <code>"rows"</code>, <code>"cols"</code>, or <code>"all"</code>.</dd> + <dt>{{DOMxRef("HTMLTableElement.summary")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{HTMLAttrxRef("summary", "table")}} attribute.</dd> + <dt>{{DOMxRef("HTMLTableElement.width")}} {{Obsolete_Inline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{HTMLAttrxRef("width", "table")}} attribute.</dd> +</dl> +</details> + +<h2 id="方法">方法</h2> + +<p><em>继承自父接口，{{DOMxRef("HTMLElement")}}</em>。</p> + +<dl> + <dt>{{DOMxRef("HTMLTableElement.createTHead()")}}</dt> + <dd>返回一个 {{DOMxRef("HTMLElement")}}，表示子元素中的第一个 {{HTMLElement("thead")}}。如果找不到，则创建一个新的并且立即插入到DOM树中既不是 {{HTMLElement("caption")}} 也不是 {{HTMLElement("colgroup")}} 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话）。</dd> + <dt>{{DOMxRef("HTMLTableElement.deleteTHead()")}}</dt> + <dd>移除子元素中的第一个 {{HTMLElement("thead")}}。</dd> + <dt>{{DOMxRef("HTMLTableElement.createTFoot()")}}</dt> + <dd>返回一个 {{DOMxRef("HTMLElement")}}，表示子元素中的第一个 {{HTMLElement("tfoot")}}。如果找不到，则创建一个新的并且立即插入到DOM树中既不是 {{HTMLElement("caption")}}、{{HTMLElement("colgroup")}} 也不是 {{HTMLElement("thead")}} 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话）。</dd> + <dt>{{DOMxRef("HTMLTableElement.deleteTFoot()")}}</dt> + <dd>移除子元素中的第一个 {{HTMLElement("tfoot")}}。</dd> + <dt>{{DOMxRef("HTMLTableElement.createCaption()")}}</dt> + <dd>返回一个 {{DOMxRef("HTMLElement")}}，表示子元素中的第一个 {{HTMLElement("caption")}}。 如果找不到，则创建一个新的并且插入到DOM树中作为 {{HTMLElement("table")}} 的第一个子元素。</dd> + <dt>{{DOMxRef("HTMLTableElement.deleteCaption()")}}</dt> + <dd>移除子元素中的第一个 {{HTMLElement("caption")}}。</dd> + <dt>{{DOMxRef("HTMLTableElement.insertRow()")}}</dt> + <dd>返回一个 {{DOMxRef("HTMLTableRowElement")}}，表示表格中的一个新行。它会被立即插入到行集合中给定 <code>index</code> 位置所表示的 {{HTMLElement("tr")}} 元素之前。如果有必要一个 {{HTMLElement("tbody")}} 会被创建。如果 <code>index</code> 值为 <code>-1</code>， 这个新行会被追加到集合中。如果 <code>index</code> 值小于 <code>-1</code> 或者大于集合中的行总数，一个带有 <code>IndexSizeError</code> 值的异常 {{DOMxRef("DOMException")}} 会发生。</dd> + <dt>{{DOMxRef("HTMLTableElement.deleteRow()")}}</dt> + <dd>移除与参数中给定 <code>index</code> 值相关的行。如果 <code>index</code> 值为 <code>-1</code>，最后一行会被移除；如果 <code>index</code> 值小于 <code>-1</code> 或者大于集合中的行总数，一个带有 <code>IndexSizeError</code> 值的异常 {{DOMxRef("DOMException")}} 会发生。</dd> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>添加了 <code>sortable</code> 属性和 <code>stopSorting()</code> 方法。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>添加了 <code>createTBody()</code> 方法。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>规定了当 <code>caption</code>、<code>tHead</code>、<code>tFoot</code>、<code>insertRow()</code> 和 <code>deleteRow()</code> 发生异常时。</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初始定义。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLTableElement")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>实现了这个接口的HTML元素：{{HTMLElement("table")}}。</li> +</ul> |