Tengo mi tabla en html, y por medio de javascript y un boton, puedo agregar cuantas filas quiera,cuando se crea la fila, como puedo hacer que en al columna accion donde se crea un boton con un "X", al presionar tenga una sub fila que se expanda y se contraega, como el los ejemplos de jquery https://datatables.net/examples/server_side/row_details.html, pero sin usarlo
function agregarFila() {
document.getElementById("example").insertRow(-1).innerHTML = '<td><button type="button" class="btn btn-success" onclick="expandir()">+</button></td><td contenteditable="true">x</td><td contenteditable="true">x</td><td contenteditable="true">x</td><td contenteditable="true">x</td></td>';
}
function expandir() {
//subfila con textfield, label etc
}
<body>
<div class="row">
<div class="col-md-12 ml-auto">
<button id="enviar" type="button" class="btn btn-success" onclick="agregarFila()" style="float:right">Agregar Direccion</button>
</div>
</div>
<br>
<table id="example" class="table table-striped table-bordered table-responsive">
<thead>
<tr>
<th style="width:10px;">Acciones</th>
<th style="width:10px;">Calle</th>
<th style="width:10px;">Colonia</th>
<th style="width:10px;">Numero Exterior</th>
<th style="width:10px;">Numero Interior</th>
</tr>
</thead>
<tbody id="example">
<tr>
</tr>
</tbody>
</table>
<script src="../Js/table.js"></script>
</body>