Update Multiple Data in Table using JavaScript and JQuery and print them on same or different page.

Thursday, May 28, 2020

Step 1:

File Name: tttt.html

In the above step1, focus on the underlined Id’s. You will get to know the logic behind this later.

Step2:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Since, we are doing update using jQuery. We have added the required link in the <script> inside <body>.

Step 3:

This is the main step:

Line 9 & Line 10: we have declared 2 arrays, one to store Id’s and one to store Name’s.
Line 12: “#bt” is the id of the Update Button on which the function will be active.
Line 13: This will continuously check which checkbox is active, which will continuously run in a loop.
Line 14: This will store the id of the <tr> in r1, of which the checkbox is active.
Line 15: This will get the id of ID block by concatenating with the “id” with id of <tr>. And with .value will get the value of in the ID block.
Line 16: It is same as above. In which, it will get the id of Name Block by concatenating with the “name” with id of <tr>. with .value will get the value of in the Name block.
Line 18 & Line 19: The Value stored in the id and name1 are store in sessionStorage which can be retrieve in any html file from browser.
Line 20: It is used replace the .html file with another .html file.

Step 4:

File Name: tttt1.html

Line 8 & Line 10: The id retrieve from session are store in the form of String. Then the string is converted into Array.
Line 9 & Line 11: The name1 retrieve from session are store in the form of String. Then the string is converted into Array
Line 16: It clears the tables. It generally not required.
Line 17-Line 21: This creates column named Id and Name in the table.
Line 22-Line 29: This Creates Row, then it creates cells in it. Then inside the cells, the value of id and name1 are inserted inside the cells, one by one.
Line 34: Button is used to show the generated table on the Html page.

Output:

Note: The Above Field is Editable. On clicking Update Button, the Table is generated.

Wednesday, May 27, 2020

Step 1:

In the above step1, focus on the underlined Id’s. You will get to know the logic behind this later.

Step2:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Since, we are doing update using jQuery. We have added the required link in the <script> inside <body>.

Step 3:

This is the main step:

Line 10 & Line 11: we have declared 2 arrays, one to store Id’s and one to store Name’s.
Line 14: “#bt” is the id of the Update Button on which the function will be active.
Line 15: This will continuously check which checkbox is active, which will continuously run in a loop.
Line 16: This will store the id of the <tr> in r1, of which the checkbox is active.
Line 17: This will get the id of ID block by concatenating with the “id” with id of <tr>. And with .value will get the value of in the ID block.
Line 18: It is same as above. In which, it will get the id of Name Block by concatenating with the “name” with id of <tr>. with .value will get the value of in the Name block.
Line 20: after getting all values, we call another function “callme()” to print in the table.

Step 4:

<table id="mytable1" border="1"></table>

In this Step create another table with id= “mytable1” to display the updated values.

Step 5:

Line 28: It is basically used to avoid repetitions of the rows.
Line 29-Line 33: It is used to create table Column; i.e., Id and Name Column.
Line 36- Line 38: We are firstly creating the table row and then inserting cells inside it.
Line 39: we are getting id from id array and printing in the id column.
Line 40: we are getting name from name array and printing in the name column.

OUTPUT:

Note: The Above Field is Editable. On clicking Update Button, the Table is generated.
https://jsfiddle.net/rounaksuthar/6oftnp8L/1/

Pages