How can I loop through interactive grid and calculate low and hi

ghz 8months ago ⋅ 130 views

How can I loop through interactive grid and calculate low and high limit or for each row?

I have interactive grid and I need to calculate low limit and high limit depends on values of mean and SD and this is the equation

low = (mean - sd) * 2 
high = (mean + sd) * 2

this is the example see image :

enter image description here

I need when click the button calculate low limit and high limit execute the calculations

I have old C sharp program and I did the loop and calculation when button pressed and this is the C sharp code :

  private void btnsdi_Click(object sender, EventArgs e)
        {
            for (int i = 0; i < dgvResult.Rows.Count; i++)
            {
                if (!String.IsNullOrEmpty(dgvResult.Rows[i].Cells[4].Value.ToString()) && !String.IsNullOrEmpty(dgvResult.Rows[i].Cells[5].Value.ToString()))
                {
                   
                    string mean = dgvResult.Rows[i].Cells[4].Value.ToString();
                    string sd = dgvResult.Rows[i].Cells[5].Value.ToString();

                    dgvResult.Rows[i].Cells[6].Value = (Convert.ToDecimal(mean) - (Convert.ToDecimal(sd) * 2));
                    dgvResult.Rows[i].Cells[7].Value = (+Convert.ToDecimal(mean) +(Convert.ToDecimal(sd) * 2));
                  
                }

            }
        }

How can I loop and do the calculation when click the button in interactive grid or if I can do it for each row when enter mean and SD do calculation by the row ?

Answers

To achieve the desired functionality in an interactive grid using JavaScript, you can add an event listener to the button click event. When the button is clicked, you can loop through each row of the grid, retrieve the values of mean and SD, calculate the low and high limits, and update the respective cells in the grid.

Here's how you can implement this in JavaScript:

// Add an event listener to the button click event
document.getElementById("calculate-button").addEventListener("click", function() {
    // Get the interactive grid
    var grid = document.getElementById("interactive-grid");
    // Get all the rows in the grid
    var rows = grid.querySelectorAll("tr");

    // Loop through each row
    for (var i = 0; i < rows.length; i++) {
        // Get the cells in the current row
        var cells = rows[i].querySelectorAll("td");

        // Check if mean and SD cells are not empty
        if (cells[4].innerText.trim() !== "" && cells[5].innerText.trim() !== "") {
            // Retrieve the values of mean and SD
            var mean = parseFloat(cells[4].innerText.trim());
            var sd = parseFloat(cells[5].innerText.trim());

            // Calculate low and high limits
            var low = (mean - sd) * 2;
            var high = (mean + sd) * 2;

            // Update the respective cells with calculated values
            cells[6].innerText = low.toFixed(2); // Assuming low limit is in cell index 6
            cells[7].innerText = high.toFixed(2); // Assuming high limit is in cell index 7
        }
    }
});

Make sure to replace "calculate-button" with the ID of your calculate button, and "interactive-grid" with the ID of your interactive grid. Also, adjust the cell indices as per your grid structure.

This JavaScript code listens for the click event on the button with the specified ID. When clicked, it loops through each row of the interactive grid, retrieves the values of mean and SD from the respective cells, calculates the low and high limits, and updates the corresponding cells with the calculated values.

#oracle