Click here to Skip to main content
15,352,974 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have three Groups - CAPITAL, FIXED ASSET & CURRENT ASSET (pink color).

If there is no another row under it, it is a child unless there is another row under it, it will become a parent where the textbox of the row will be disabled. If the row act as parent and child, the textbox will also disabled. How can I define the parent and disabled the textbox since the level of row is dynamic? In my image, grey color mean the textbox is disabled.

Next, I want to calculate the total amount of each child and display at their own parent row(if have) and group. Please see my image 3. Users only can input value in the child. For now, I only success calculate the grand total amount and the sum of each group as shown in my JS Fiddle [Current JS Fiddle for Image 1] or [Image 1]. How to calculate each of the child and display on the parent row based on group condition for the table?

Image 1: [My Current result]
Image 2: [My My Expected Result For Setting Parent and disabled textbox]
Image 3: [My Expected Result for Calculate up the sum of group]

What I have tried:

For now what I have tried is I was using data-depth to set the child as parent to disable the textbox. But, how can I calculate the sum of child and display on the parent that I defined based on the data-depth? [JS FIDDLE for Image 2]I not sure my coding is right or not for set the child as parent. Can someone help me for the calculation?
$('tbody tr').each(function() {
  var depth = $(this).attr("data-depth");
  if ($(this).next().attr("data-depth") > depth) {
    var parent = $(this).find("input").prop("disabled", true)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900