1

enter image description hereHere I am trying to append from one table(3 columns) to another. That works fine.And I need some extra columns in that. Can anyone please help me. My snippet.

function table2(){
 $('#one').on("click", function(){
    $('#one tbody input:checked').parent().parent().appendTo("#two");
 } 
Raghavi
  • 321
  • 2
  • 4
  • 19
  • 4
    further explain with your problem – Jack jdeoel Jul 07 '17 at 04:20
  • you want to add rows to exist table and the new one which was created before. Is it right ? – ToujouAya Jul 07 '17 at 04:24
  • http://jsfiddle.net/fmuW6/11/ – Sinto Jul 07 '17 at 04:24
  • yeah.. thats the one I need.. I have the column headings. And now i need to add the rows or cells @ToujouAya – Raghavi Jul 07 '17 at 04:29
  • ok, check this https://stackoverflow.com/a/35909559/4229270 – Sinto Jul 07 '17 at 04:31
  • @Raghavi well that jsfiddle basically clones the first row and uses that to append `x3`. I wanted to explain that since the source has no comments. Something you will notice, whatever values are set in the first row will duplicate into the new ones you append, not sure if that will become a a problem for you or not but worth pointing out. I would also avoid using `ID`'s if you use that method as it will then create duplicate `ID`'s – NewToJS Jul 07 '17 at 04:33
  • I have included a screenshot for better understanding.. kindly check@DavidJorHpan – Raghavi Jul 07 '17 at 05:58

1 Answers1

0

This might be helpful, this is a example.

// First of all this is an example, you has to modify this make as you wish
// Here we can add dynamic columns & rows
// Also , I have given an option to specify the row/column name
<table border="1" id="mtable">
    <thead>
        <tr>
            <td>Item</td><td>Red</td><td>Green</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Some Item</td><td><input type="checkbox"/></td><td><input type="checkbox"/></td>
        </tr>
    </tbody>
</table>
<br/><br/>
<input id="row" placeholder="Enter Item Name"/><button id="irow">Insert Row</button><br/><br/>
<input id="col" placeholder="Enter Heading"/><button id="icol">Insert Column</button>

<script>
    // This is add additional row to a table
    $('#irow').click(function(){
        if($('#row').val()){
            // Creates a copy of last row and you specify the name of row as well as
            // each <td>. Here I'm given a checkbox.
            $('#mtable tbody').append($("#mtable tbody tr:last").clone());
            $('#mtable tbody tr:last :checkbox').attr('checked',false);
            $('#mtable tbody tr:last td:first').html($('#row').val());
        }else{alert('Enter Text');}
    });
    $('#icol').click(function(){
        // This is add additional column to a table
        if($('#col').val()){
            // This is to append/add column to a table
            $('#mtable tr').append($("<td>"));
            $('#mtable thead tr>td:last').html($('#col').val());
            // This is to add a column to each rows in a table
            $('#mtable tbody tr').each(function(){
                $(this).children('td:last').append($('<input type="checkbox">'));
            });
        } else { alert('Enter Text'); }
    });
</script>
Sinto
  • 3,915
  • 11
  • 36
  • 70
  • Do you not think it would be a good idea to explain why it would be useful and maybe explain the source code so others can understand how it functions? If you turn this into a working snippet and explain the source code I will be happy to up the answer but as it stands this looks like nothing but a copy/paste and hope they might find use of it. Some people seek help but also want to understand the solution/source rather than just doing a copy/paste, also it can help others who stumble on this with a similar issue. – NewToJS Jul 07 '17 at 04:38
  • Sure will explain that. – Sinto Jul 07 '17 at 04:40
  • Also you can check the documentation https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement. – Sinto Jul 07 '17 at 04:56