JSFiddle - React, Tailwind, and code Playground

by Trimax

HTML

<table id="miTabla" summary="Descripción de la tabla y su contenido">
<caption>Título de la tabla</caption>
<thead>
  <tr>
    <th scope="col"></th>
    <th scope="col">Cabecera columna 1</th>
    <th scope="col">Cabecera columna 2</th>
  </tr>
</thead>
 
<tfoot>
  <tr>    
    <th scope="col"></th>
    <th scope="col">Cabecera columna 1</th>
    <th scope="col">Cabecera columna 2</th>
  </tr>
</tfoot>
 
<tbody>
  <tr>
    <th scope="row">Cabecera fila 1</th>
    <td>Celda 1 - 1</td>
    <td>Celda 1 - 2</td>
  </tr>
  <tr>
    <th scope="row">Cabecera fila 2</th>
    <td>Celda 2 - 1</td>
    <td>Celda 2 - 2</td>
  </tr>
</tbody>
 
</table>

CSS

* {
    border: 1px solid black;
    
}

JavaScript

/* Obtener el número total de filas de la tabla: */
var tabla = document.getElementById('miTabla');
var numFilas = tabla.rows.length;
alert(numFilas);

/* Obtener el número total de cuerpos de la tabla (secciones <tbody>): */
var tabla = document.getElementById('miTabla');
var numCuerpos = tabla.tBodies.length;
alert(numCuerpos);

/* Obtener el número de filas del primer cuerpo (sección <tbody>) de la tabla: */
var tabla = document.getElementById('miTabla');
var numFilasCuerpo = tabla.tBodies[0].rows.length;
alert(numFilasCuerpo);

/* Insertar una tercera fila al cuerpo (sección <tbody>) de la tabla: */
var tabla = document.getElementById('miTabla');
// Insertar la tercera fila
tabla.tBodies[0].insertRow(2);
// Crear la columna de tipo <th> que hace de cabecera de fila
var cabecera = document.createElement("th");
cabecera.setAttribute('scope', 'row');
cabecera.innerHTML = 'Cabecera fila 3'
tabla.tBodies[0].rows[2].appendChild(cabecera);
// Crear las dos columnas de datos y añadirlas a la nueva fila
tabla.tBodies[0].rows[2].insertCell(1);
tabla.tBodies[0].rows[2].cells[1].innerHTML = 'Celda 3 - 1';
tabla.tBodies[0].rows[2].insertCell(2);
tabla.tBodies[0].rows[2].cells[2].innerHTML = 'Celda 3 - 2';

/* Obtener el texto de la primera columna de la primera fila del cuerpo (sección <tbody>): */
var tabla = document.getElementById('miTabla');
var texto = tabla.tBodies[0].rows[0].cells[1].innerHTML;
alert(texto);

/* Borrar la primera fila de la tabla y la primera fila del cuerpo (sección <tbody>): */
var tabla = document.getElementById('miTabla');
tabla.deleteRow(0);
tabla.tBodies[0].deleteRow(0);