Dynamically add or delete a row when inputting data

Background
When inputting data, users often need to add, delete and insert rows dynamically. Moreover, the newly added rows should automatically generate the same properties with existing rows. Such as edit style, auto computation and validation.
It’s not easy to achieve these functions with common reporting tools. Especially for group report and subdivision input report, it’s more complex. Because users should be able to select a report region, and insert, delete or add rows in the selected region.

Difficulties
To achieve these functions by programming, there are a lot of difficulties.
1. It’s required to keep a record of each addition, modification, and deletion.
2. It’s needed to write complex javascript to achieve dynamic addition and deletion.
3. For group report and subdivision input report, the report region selected for addition and deletion needs to be identified intelligently.
4. Users have to take many details into consideration. For example, when adding a row, properties like edit style, auto computation, validation need to be dynamically parsed to the newly added row. For these properties often relate to the data of current row, it will be of great difficulty. Moreover, as some automatic computations are global, their expressions need to be dynamically parsed according to the data of all rows. The summation function sum () is an example.
5. The new row may have some default properties like dynamic sequential number.

Solution
As a wonderful Web reporting tool, RAQ Report takes great effort to solve this problem. As a result, the Row report mode of RAQ report has fundamentally solved the above problems of dynamic additions and deletions. With RAQ Report, users can achieve these functions easily.

Easy Operations:
1. Set Report style as Row report and set Input type as Input Report.
2. Define properties like Edit style, Auto compute, Sequential Number and Validation according to requirements.
3. Add properties like insertRowLabel, appendRowLabel, deleteRowLabel to the jsp file.


Reference: http://freezea.blogspot.com/


Comments

Author: Phagu Mahato13 Feb 2014 Member Level: Gold   Points : 8

Example of JavaScript code snippet for Dynamically add or delete a row



function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}


function insRow()
{
var x=document.getElementById('POITable').insertRow(1);
var c1=x.insertCell(0);
var c2=x.insertCell(1);
c1.innerHTML="Example1";
c2.innerHTML="Example2";
}

Or try another code


Width="700px" Height="200px" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter"
AllowResize="True">























  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: