How to append columns in the table: jquery

Question

Summary: I have a template which contains two add buttons and two tables. When user clicks add button rows should append to the respective table. Example:

    <div class="reports">
   <div class="panel">
    <table class="A">
     <thead>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
      <td>E</td>
      <td>F</td>
     </thead>
     <tbody></tbody>
    </table>
   </div>
   <button class="add" type="button">Add</button>
  </div>

and jquery is

$('.reports').on('click','.add',function(){
    var path = $(this).parents('.reports').find(.A tbody);
    $(
            '<tr>'+
            '<td class="remove-row" role="button" aria-label="Remove Region"></td>'+
            '<td>'+value1+'</td>'+
            '<td><button>'+value2+'</button></td>'+
            '<td>'+value3+'</td>'+
            '<td>'+value4+'</td>'+
            '<td class="ordering" aria-label="Re-order"></td>'+
            '</tr>'
        ).appendTo(path);
});

I want to append first two columns and do something with the value2 and append value3,value4,lastcolumn. example:

$('.reports').on('click','.add',function(){
        var path = $(this).parents('.reports').find('.A tbody');
        $('<tr>'+'<td class="remove-row" role="button" aria-label="Remove Region"></td>'+
        '<td>'+value1+'</td>').appendTo(path to first two columns);
        $('<td><button>'+value2+'</button></td>').appendTo(path to third column);
        $('<td>'+value3+'</td>'+'<td>'+value4+'</td>'+
         '<td class="ordering" aria-label="Re-order"></td>'+'</tr>').appendTo(path to last 3 columns);

    });

I looking for the logic here.

Answer 1

Whilst I'm not totally sure of your aim, you can use insertCell() in order to add the 'columns' you need. Once you have this you can then populate as you need

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell

Answer 2

I am not exactly sure what you are asking, but in order to add a column in the middle of a table, you can use the following code/function. To add a row, use your existing function, just make sure to add the quotes inside your .find call where you are setting path, or it will fail. The code below assumes you want to add a column after the second column (index of 1)

$('.reports').on('click', '.add', function () {
    $('.reports').find('.A tr').each(function () {
        $(this).find('td:eq(1)').after('<td>test</td>');
    });
});

 $('.reports').on('click', '.add', function () { $('.reports').find('.A tr').each(function () { $(this).find('td:eq(1)').after('<td>test</td>'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="reports"> <div class="panel"> <table class="A"> <thead> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> </tr> </thead> <tbody></tbody> </table> </div> <button class="add" type="button">Add</button> </div> 

Answer 3

I am not sure what you are upto but Try adding the condition before append and push element to appendTo(). Or you can use jQuery Chaining.

$('.reports').on('click','.add',function(){
    if (someInput = "Map"){
       var value2 += //do Something;
    }else{
       var value2 += someInput;
    }
    var path = $(this).parents('.reports').find(.A tbody);
    var newRow = $(
            '<tr>'+
            '<td class="remove-row" role="button" aria-label="Remove Region"></td>'+
            '<td>'+value1+'</td>'+
            '<td><button>'+value2+'</button></td>'+
            '<td>'+value3+'</td>'+
            '<td>'+value4+'</td>'+
            '<td class="ordering" aria-label="Re-order"></td>'+
            '</tr>'
        );
      newRow.appendTo(path)
      //You can do here whatever you want because the table is in DOM now          
});