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.

Can you attempt to clarify what you want? I don't understand exactly what you are asking — depperm
– depperm, Commented Jul 20, 2015 at 15:40
I think he wants to add another column between columns 1&2 (assuming index of 0) — ctwheels
– ctwheels, Commented Jul 20, 2015 at 15:42
i want to keep " if condition" for the value2. If value2=="Map"{//do something}. — Gautam
– Gautam, Commented Jul 20, 2015 at 15:47

Nanda · Accepted Answer · 2015-07-20 19:07:59Z

1

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          
});

answered Jul 20, 2015 at 19:07

Nanda

1738 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gautam Over a year ago

Thank you . really helpful.

ctwheels · Accepted Answer · 2015-07-20 15:52:54Z

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>

Barett · Accepted Answer · 2015-07-20 16:17:50Z

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

edited Jul 20, 2015 at 16:17

Barett

5,9546 gold badges54 silver badges57 bronze badges

answered Jul 20, 2015 at 15:49

locksem

3353 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to append columns in the table: jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related