1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: HTMLTableElement.insertRow()
slug: Web/API/HTMLTableElement/insertRow
translation_of: Web/API/HTMLTableElement/insertRow
---
<div>
<div>
<div>{{APIRef("HTML DOM")}}</div>
</div>
</div>
<p>El método <strong><code>HTMLTableElement.insertRow()</code></strong> inserta una nueva fila en la tabla.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">var <em>row</em> = <em>HTMLTableElement</em>.insertRow(<em>optional index = -1</em>);</pre>
<ul>
<li><a href="/en-US/docs/DOM/HTMLTableElement"><code>HTMLTableElement</code></a> es una referencia a un elemento table HTML.</li>
<li><code>index</code> es el índice de fila de la nueva fila.</li>
<li><code>row</code> queda asignada a una referencia a la nueva fila. Una referencia a un <a href="/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>.<br>
Si <code>index</code> es -1 o igual al número de filas, la nueva fila es añadida detrás de la última. Si <code>index</code> es mayor que el números defilas, es lanzada una excepción IndexSizeError. Si index se omite, se asume por defecto -1.</li>
<li>Si una tabla tiene múltiples elementos <code>tbody</code>, por defecto la nueva fila es insertada en el último <code>tbody</code>. Para insertar una fila dentro de un <code>tbody</code> especifico pued hacer:<br>
<code>var <em>specific_tbody</em>=document.getElementById(<em>tbody_id</em>);<br>
var <em>row</em>=specific_tbody.insertRow(<em>index</em>)</code></li>
</ul>
<h2 id="Ejemplo">Ejemplo</h2>
<pre class="brush:html"><table id="TableA">
<tr>
<td>Antigua fila superior</td>
</tr>
</table>
<script type="text/javascript">
function addRow(tableID) {
// Obtiene una referencia a la tabla
var tableRef = document.getElementById(tableID);
// Inserta una fila en la tabla, en el índice 0
var newRow = tableRef.insertRow(0);
// Inserta una celda en la fila, en el índice 0
var newCell = newRow.insertCell(0);
// Añade un nodo de texto a la celda
var newText = document.createTextNode('Nueva fila superior');
newCell.appendChild(newText);
}
// Llama a addRow() con el ID de la tabla
addRow('TableA');
</script></pre>
<p>Para ser válida en un documento HTML, una TR debe contener al menos un elemento TD.</p>
<p>Observese que <code>insertRow</code> inserta la fila diréctamente en la tabla y retorna una referencia a la nueva fila. La fila no necesita ser añadida separadamente (p.e. con <code><a href="/es/docs/DOM/document.appendChild">document.appendChild()</a></code>) tal sería el caso si se usase <code><a href="/en-US/docs/DOM/document.createElement">document.createElement()</a></code> para crear el nuevo elemento TR.</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Especificación</th>
<th>Estado</th>
<th>Observaciones</th>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
<td>{{Spec2("DOM2 HTML")}}</td>
<td>Especificó con más detalle dónde se inserta la fila.</td>
</tr>
<tr>
<td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
<td>{{Spec2("DOM1")}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Prestación</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>4</td>
<td>3<sup>[1]</sup></td>
<td>5.5</td>
<td>10</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Prestación</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] A partir deGecko 20.0 {{geckoRelease("20.0")}} el argumento index se estableció como opcional y con valor por defecto -1 según la especificación HTML.</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
</ul>
|
