从表tr td获取数据并将其转换为JSON

时间:2018-03-05 06:17:04

标签: javascript jquery html html-table

到目前为止,我已经做到了。



 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);
    }
&#13;
<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>
&#13;
&#13;
&#13;

它再次创建具有唯一ID的动态数据 我这样做的方式可能是错的。

coz此处保留为第一行和 子组保持第2,第3,第4行,依此类推。

此处添加群组按钮将创建群组和 添加子组按钮将添加该组的子组。

我需要可以按组/子组分隔的json数据。

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

感谢任何形式的帮助或建议。提前谢谢。

0 个答案:

没有答案