Text-to-speech (TTS) is a type of Assistive AI Technology that converts digital text to Human Imitative voice. It's sometimes called “read aloud” technology and developed by using Speech Synthesis.
Table of Contents
1. Basic Setup with Required Plugins
Beautifying the form means adding CSS properties to the form elements to make the form looks Clean & Colorfull.
Here are the steps to add table row:
- Handle jquery click() event when click on "Add New Row" button.
- Read all the input fields value from the Html Form and make it as an object.
- Construct the Row Markup with adding form input values assign it to a variable.
- Push the constructed object to an array which holds all input entries as list of objects.
- Add the Row Markup to the table by passing it to jQuery event called append();
- Once the record added to the table, clear all form fields using jquery.
The basic web page as follows.
2. Beautify the form with CSS
Beautifying the form means adding CSS properties to the form elements to make the form looks Clean & Colorfull.
Here are the steps to add table row:
- Handle jquery click() event when click on "Add New Row" button.
- Read all the input fields value from the Html Form and make it as an object.
- Construct the Row Markup with adding form input values assign it to a variable.
- Push the constructed object to an array which holds all input entries as list of objects.
- Add the Row Markup to the table by passing it to jQuery event called append();
- Once the record added to the table, clear all form fields using jquery.
2. Modify Existing Record of the Table
Dynamic table provides the feature to Update the Existing Record. When click on edit button all vallues will be displayed in the respective fields and allow user to modify it.
Here are the steps to update table row:
- Handle jquery click() event when click on "Edit" button.
- Get the index value from the index attribute of the button using jQuery attr() method.
- Get the object from the selected index of the array.
- Display the values for the respective fields.
- Handle click() even when click on Update button and construct an object of the form input fields.
- Replace the object in array as well as table body.
4. Delete Row of the Table
To remove selected row from the table dynamically, you can use the jQuery .remove() method.
Here are the steps to Delete Table row:
- Handle jquery click() event when click on "Remove" button.
- Display a confirm box saying that "Are you sure you would like to delete this record?".
- if click on "OK" get the index value from the index attribute of the button using jQuery attr() method.
- First remove the object from the selected index of the array.
- Then refresh the table body by re iterating the array;
The web page after implementing the Delete Row logic as follows.
Screenshot 1
Screenshot 2
5. Save Data to Memory using JavaScript API
Save entire table body into external file as well as browser cache memory in once click.
Here are the steps to Save Table Records:
- Declare fileHandler instance using window.showOpenFilePicker()().
- A file selector window will opens, just slelect/create new json file. Ex: Table.json
- Add records into the table.
- Conver arry of objects into Json String.
- Write the Json String into the selected file.
- Put the array of objects into localStorage
- Close the file streams.
- When refresh the page, data will be retrieved from localStorage memory.
- When select the Json file, data which are present in the Json file will be loaded into table body.
Conclusion
Save entire table body into external file as well as browser cache memory in once click.
Comments
Post a Comment