jQuery - 将所有突出显示的 tds 插入所有 trs

Question

I am using jQuery table to insert Row (Before or After) by clicking on respective buttons.

1. OnClick of insertRowBefore and insertRowAfter , I am able to clone the selected row and insert before and after successfully.

2. onClick of any td, I am able to add class and highlight the all indexed tds.

3. Same way, how can I clone all selected tds and insert as new column to before or after the selected column in each row

 $('button').attr('disabled', true); $(document).on('click', "table#myTable tr td", function(){ let index = $(this).index(); $('#myTable tr').removeClass('tr-active'); $('#myTable tr td').removeClass('td-active'); $(this).closest('tr').addClass('tr-active'); $(`#myTable tr td:nth-child(${index + 1})`).addClass('td-active'); $('button').attr('disabled', false); $('p').css('visibility', 'hidden'); }); $(document).on('click', '#addRowBefore', function(){ var selectedRow = $('table#myTable tr.tr-active'); $(selectedRow).clone().insertBefore('table#myTable tr.tr-active'); $('table#myTable tr').removeClass('tr-active'); $('table#myTable tr td').removeClass('td-active'); $('button').attr('disabled', true); $('p').css('visibility', 'visible'); }); $(document).on('click', '#addRowAfter', function(){ var selectedRow = $('table#myTable tr.tr-active'); $(selectedRow).clone().insertAfter('table#myTable tr.tr-active'); $('table#myTable tr').removeClass('tr-active'); $('table#myTable tr td').removeClass('td-active'); $('button').attr('disabled', true); $('p').css('visibility', 'visible'); });

 body{font-family:verdana;font-size:13px;} table, td{border:1px solid #000;border-collapse:collapse;} td{padding:5px;min-width:60px;}.buttons{margin-top:20px;} td.td-active{background-color:#ffcbcb;important.} tr:tr-active td{background-color;#ccc:} p{background-color;#ffbebe:padding;5px:border;1px solid #bb4040:} button {background-color; #471173:border; 1px solid #2d0150:padding; 5px 10px:margin-right; 5px:color; #ffffff:cursor;pointer:} button:disabled{background-color; #e8e8e8:border; 1px solid #bfbfbf:color; #9a9a9a:cursor:not-allowed}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>R1 C1</td> <td>R1 C</td> <td>R1 C3</td> <td>R1 C4</td> </tr> <tr> <td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td> <td>R2 C4</td> </tr> <tr> <td>R3 C1</td> <td>R3 C2</td> <td>R3 C3</td> <td>R3 C4</td> </tr> </table> <br> <p>Please select / click on any cell to enable actions.</p> <button id="addRowBefore">Insert row before</button> <button id="addRowAfter">Insert row after</button> <br> <br> <button id="addColumnBefore">Insert column before</button> <button id="addColumnAfter">Insert column after</button>

Credits to @Sajeeb Ahamed, @Rory McCrossan and @epascarello for helping in highlighting tds.

Answer 1

You could do it like this using each() to select all active cells, clone them and insert the clone before or after the selected cells.

 $('button').attr('disabled', true); $(document).on('click', "table#myTable tr td", function() { let index = $(this).index(); $('#myTable tr').removeClass('tr-active'); $('#myTable tr td').removeClass('td-active'); $(this).closest('tr').addClass('tr-active'); $(`#myTable tr td:nth-child(${index + 1})`).addClass('td-active'); $('button').attr('disabled', false); $('p').css('visibility', 'hidden'); }); $(document).on('click', '#addRowBefore', function() { var selectedRow = $('table#myTable tr.tr-active'); $(selectedRow).clone().insertBefore('table#myTable tr.tr-active'); $('table#myTable tr').removeClass('tr-active'); $('table#myTable tr td').removeClass('td-active'); $('button').attr('disabled', true); $('p').css('visibility', 'visible'); }); $(document).on('click', '#addRowAfter', function() { var selectedRow = $('table#myTable tr.tr-active'); $(selectedRow).clone().insertAfter('table#myTable tr.tr-active'); $('table#myTable tr').removeClass('tr-active'); $('table#myTable tr td').removeClass('td-active'); $('button').attr('disabled', true); $('p').css('visibility', 'visible'); }); $(document).on('click', '#addColumnBefore', function() { $('table#myTable td.td-active').each(function() { $(this).clone().insertBefore($(this)); }); $('table#myTable tr').removeClass('tr-active'); $('table#myTable tr td').removeClass('td-active'); $('button').attr('disabled', true); $('p').css('visibility', 'visible'); }); $(document).on('click', '#addColumnAfter', function() { $('table#myTable td.td-active').each(function() { $(this).clone().insertAfter($(this)); }); $('table#myTable tr').removeClass('tr-active'); $('table#myTable tr td').removeClass('td-active'); $('button').attr('disabled', true); $('p').css('visibility', 'visible'); });

 body{font-family:verdana;font-size:13px;} table, td{border:1px solid #000;border-collapse:collapse;} td{padding:5px;min-width:60px;}.buttons{margin-top:20px;} td.td-active{background-color:#ffcbcb;important.} tr:tr-active td{background-color;#ccc:} p{background-color;#ffbebe:padding;5px:border;1px solid #bb4040:} button {background-color; #471173:border; 1px solid #2d0150:padding; 5px 10px:margin-right; 5px:color; #ffffff:cursor;pointer:} button:disabled{background-color; #e8e8e8:border; 1px solid #bfbfbf:color; #9a9a9a:cursor:not-allowed}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>R1 C1</td> <td>R1 C</td> <td>R1 C3</td> <td>R1 C4</td> </tr> <tr> <td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td> <td>R2 C4</td> </tr> <tr> <td>R3 C1</td> <td>R3 C2</td> <td>R3 C3</td> <td>R3 C4</td> </tr> </table> <br> <p>Please select / click on any cell to enable actions.</p> <button id="addRowBefore">Insert row before</button> <button id="addRowAfter">Insert row after</button> <br> <br> <button id="addColumnBefore">Insert column before</button> <button id="addColumnAfter">Insert column after</button>