Escribí una tabla simple y en cada fila actualizaré la etiqueta div .
Como puede ver, cada fila contiene dos partes que están separadas por : y cada parte en mi matriz separada por | .
por lo que la salida es algo como esto:
|3:Apple|5:Orange|1:Lemon
Soy muy novato en JS, así que si respondes estas dos preguntas, te lo agradeceré.
¿Cómo puedo actualizar todo el div después de eliminar cada fila?
De acuerdo con el código que escribí (solo JS), ¿sugiere una forma más corta y limpia de actualizar el div? Siento que el código que escribí es muy espagueti.
$('.add-row').click(function() { row = "<tr class='prod-row'><td class='product_kind'><input type='number' name='prodKind' placeholder='number' /></td><td class='product_kind'><input dir='rtl' type='text' name='prodKind' placeholder='item' /></td><td><span class='del-row font-icon-minus-sign'>del</span></td></tr>"; $(this).closest('table').append(row); }); $('table').on('click', 'td span.del-row', function(e) { $(this).closest('tr').remove(); }); $(document).on('change', 'input[name="prodKind"]', function() { mainArr = []; var mainTable = $(this).closest('table'); var tr = mainTable.find('tr'); tr.each(function() { tmpArr = []; $(this).find('.product_kind').each(function() { var values = $(this).find('input').val(); tmpArr.push(values); }); mainArr.push(tmpArr.join(":")); }); $(this).parent().parent().parent().parent().closest('td').children('.kind-out').html(mainArr.join("|")); $(this).parent().parent().parent().parent().closest('td').children('.kind-out').trigger('blur'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table> <tr> <td> <table> <tr> <td> <table class='table tablemain' border=1> <tr> <td>number</td> <td>item</td> <td><span class="add-row font-icon-plus-sign">add</span></td> </tr> </table> <div class='kind-out'></div> </td> </tr> </table> </td> </tr> </table>He agregado una función de procesamiento que básicamente se llama al hacer clic en el botón Eliminar y el cambio de entrada
$('.add-row').click(function() { row = "<tr class='prod-row'><td class='product_kind'><input type='number' name='prodKind' placeholder='number' /></td><td class='product_kind'><input dir='rtl' type='text' name='prodKind' placeholder='item' /></td><td><span class='del-row font-icon-minus-sign'>del</span></td></tr>"; $(this).closest('table').append(row); }); $('table').on('click', 'td span.del-row', function(e) { $(this).closest('tr').remove(); render(); }); //Render function called from onchange as well as delete click function render(){ mainArr = []; var mainTable = $('.tablemain'); var tr = mainTable.find('tr'); $('.kind-out').html(""); tr.each(function() { tmpArr = []; $(this).find('.product_kind').each(function() { var values = $(this).find('input').val(); if(values.trim() != ''){ tmpArr.push(values); } }); if(tmpArr.length > 0) mainArr.push(tmpArr.join(":")); }); $('.kind-out').html(mainArr.join("|")); $('.kind-out').trigger('blur'); } $(document).on('change', 'input[name="prodKind"]', render); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table> <tr> <td> <table> <tr> <td> <table class='table tablemain' border=1> <tr> <td>number</td> <td>item</td> <td><span class="add-row font-icon-plus-sign">add</span></td> </tr> </table> <div class='kind-out'></div> </td> </tr> </table> </td> </tr> </table>Haga funciones más simples para resolver sus problemas También simplifique los caminos a los hermanos
const row = "<tr class='prod-row'><td class='product_kind'><input type='number' name='prodKind' placeholder='number' /></td><td class='product_kind'><input dir='rtl' type='text' name='prodKind' placeholder='item' /></td><td><span class='del-row font-icon-minus-sign'>del</span></td></tr>"; const getValues = $table => $table.find('tr').map(function() { return $(this).find('.product_kind input').map(function() { return this.value }).get().join(":") }).get().join("|"); const update = $mainTable => $mainTable .next('.kind-out') .html(getValues($mainTable)); $(document).on('change', 'input[name="prodKind"]', function() { const $mainTable = $(this).closest('.tablemain'); update($mainTable) }); $('.add-row').on('click', function() { $(this).closest('tbody').append(row); }); $('table').on('click', 'td span.del-row', function(e) { const $table = $(this).closest('.tablemain'); // must save before remove $(this).closest('tr').remove(); update($table) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table> <tr> <td> <table> <tr> <td> <table class='table tablemain' border=1> <tr> <td>number</td> <td>item</td> <td><span class="add-row font-icon-plus-sign">add</span></td> </tr> </table> <div class='kind-out'></div> </td> </tr> </table> </td> </tr> </table>