Get data from table tr td and convert it to JSON

Question

So far I have done this.

 function deleteGroup(e) {
        e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);

    }
var count;
    function addGroup() {
        var countPlus=count+1;
        group = $('<table class="modified-table" id="mainTab' + count + '"> <tr><td  align="left"><a style="color: green;font-weight:bold ">[ Group '+countPlus+']</a></td><td colspan="10"></td></tr><tr><td><input type="text" name="type[]" placeholder="Type Name" size="30"/></td> <td><input type="text" placeholder="No. Of Total Credit" name="totalCr[]" size="30"/></td>'+'<td><LABEL><span>Add Sub Category</span><input type="checkbox" name="Yes" value="Yes" onchange="addSubCategory(event)"></LABEL></td><td><input class="button" value="Delete" onclick="deleteGroup(this)" size="5"/> </td></tr></table>');
        $('#group').append(group);
        count++;
    }

    function addSubCategory(e) {
        var tableId = e.target.parentNode.parentNode.parentNode.parentNode.parentNode.id;
        var i=0;
        //alert(tableId);
        if(tableId === "mainTable"){
            i=0;
        } else {
            i= tableId.substr(tableId.length - 1);
        }
        row = $('<tr></tr><tr><td><input type="text" id="subType'+i+'" placeholder="Sub Type" name="subType['+i+'][]" size="20"></td><td><input type="text" placeholder="Total Credit" name="subCr['+i+'][]" size="20"></td><td><span class="" size="5" value=""/></td><td><input  size="5" class="button" value="Delete" onclick="deleteGroup(this)" /></td></tr>'); //create row
        $("#" + tableId).append(row);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <TABLE>
      <input type="button" class="button" value="Add Group" onclick="addGroup();" />
   </TABLE>   
   
   <table class="modified-table" id="mainTab">
       <tr>
    <td  align="left">
     <a style="color: green;font-weight:bold ">[ Group 1]</a>
    </td>
       <td colspan="10"></td>
    </tr>
       <tr>
       <td><input type="text" name="type[]" class="type-name" placeholder="Type Name" size="30"/></td>
       <td><input type="text" name="totalCr[]"placeholder="No. Of Total Credit" size="30"/></td>
        <td><LABEL>
        <span>Add Sub Category</span>
        <input type="checkbox" name="hasSub" onchange="addSubCategory(event)"></LABEL></td>
        <td><input type="button" class="button" value="Delete" onclick="deleteGroup(this)" size="5"/> 
        </td>        
        </tr>
</table>

            <table id="group">
            </table>

        </DIV>

It create dynamic data with unique id but again The way I am doing this it is wrong may be.

coz Here group stays as the first row and Subgroup stays as 2nd , third , 4th row and so on.

Here Add group button will create group and Add subgroup button will add subgroup of that group.

I need the json data which can be separated by group /subgroup.

LIke :

Group 0 :
   Subgroup 0;
   Subgroup 1;
   Subgroup 2;


Group 1 :
   Subgroup 0;
   Subgroup 1;
   Subgroup 2;
   ..........
   ..........


Group 2 :
   Subgroup 0;
   Subgroup 1;
   Subgroup 2;
   ----------

Any kind of help or suggestion is appreciated. Thanks in advance.

maybe look at https://stackoverflow.com/questions/2240005/convert-a-html-table-data-into-a-json-object-in-jquery? — Cesar Bielich, Mar 05 '18 at 06:23
Possible duplicate of [Convert a HTML table data into a JSON object in jQuery](https://stackoverflow.com/questions/2240005/convert-a-html-table-data-into-a-json-object-in-jquery) — Cesar Bielich, Mar 05 '18 at 06:24
Yes it is similar on the fact of converting to json but at first I need suggestion on creating dynamic add group and subgroup. — Insanity Geek, Mar 05 '18 at 06:28
Why not work the other way around? E.g. have a JS object that you parse into a table; to add values just add an object in the array and parse the object again. — Erik Terwan, Mar 05 '18 at 13:21

Get data from table tr td and convert it to JSON

0 Answers0