This tutorial explains How to Create an Editable Table with Spelling Check, in an HTML Form Word Processor. The HTML container for all the words typed, is a div element with the "contenteditable='true' " attribute. This div element and an associated textarea element, are part of an HTML form. When the submit button is clicked, JavaScript copies all the modified content with HTML tags added, from the contenteditable div, into the textarea element, and then sends the name of the textarea element and the textarea content, to the web-server.

For the insertion of a table, the end user (client) has to place the cursor at a position for the insertion. After clicking the Create Table option of the correct select element, two JavaScript prompt windows will appear, one after the other. The first prompt window will ask for the number of rows (excluding the header row); and the next one will ask for the number of columns.

Many (if not most) commercial HTML Form Word Processor out there, do not even provide for an editable table. This one does, and the complete code and how to produce the complete code, is free.

There are still many commercial HTML form word processing out there, that do not do spelling check. Well, with this tutorial, such spelling check can be done automatically. The spelling of a word in a table cell, can be corrected client. All the major browsers today, allow correction of spelling in the contenteditable div, by the client, automatically. The web-developer does not have to write any program to check spelling.

All the knowledge given in this seven part series is free, for anybody to read.

The project is done in a minimal webpage, assuming that, that is the webpage that will be displayed at the client's browser. This is the sixth part of a seven part free tutorial series. At the seventh part of the series, the reader can download the complete code of the project, for use for his/her personal or commercial website. The reader is free to modify the complete code before employing into his/her website.

The author bears no responsibility for any problem that the complete code can encounter, when applying the complete code.

The reader should have read the previous part of the series before coming here, as this is a continuation.

The textarea and contenteditable div Code

The HTML code for the textarea and contenteditable div elements is:

            <textarea id='article' name='article' hidden></textarea>
            <div contenteditable='true' id='wordProcessor' style='height:300px; overflow:scroll; border:solid 1px black'></div>

The reader should read through the code if he/she has not already done so. Currently both elements are empty. The client types and edits (do word processing) into the contenteditable div, and not in the textarea element. When the submit button is clicked, JavaScript copies all the modified content with HTML tags added, from the contenteditable div, into the textarea element, and then sends the name of the text-area element and the textarea content, to the web-server. "contenteditable" means content-editable.

The textarea element is always hidden from the client, in the whole typing and editing (word processing) activity.

The div for Buttons and select Elements

Just above the textarea and contenteditable div code, is an ordinary div element. This div is present in the complete code, but not shown above. The content of this div consists of the button and select elements to be clicked to have the markup.

Each button has a tool-tip which gives instruction to the end user (client) on what to do.

Select Element for the Create Table and Delete Table Commands

Instead of a button, there is the select element for the Create Table and Delete Table Commands. The select element code is:

                <select name="tabl" id="tabl" title='Drop down to choose option.'>
                    <option value='' onclick="createTable()" title='Place cursor at intended position, then click here.'>Create Table</option>
                    <option value='' onclick="deleteTable()" title='Select all table contents, then click here.'>Delete Table</option>
                </select> 

Read through the code, if that is not already done. The tool-tip for the whole select structure is 'Drop down to choose option.'. This is the value of its title attribute. The two option commands are Create Table and Delete Table. The tool-tip for the Create Table option is 'Place cursor at intended position, then click here.'. This is the value of its title attribute. The tool-tip for the Delete Table option is 'Select all table contents, then click here.'. This is the value of its title attribute. When the Create Table command is clicked, the createTable() function is called. When the Delete Table command is clicked, the deleteTable() function is called.

JavaScript Coding for Creating the Table

The JavaScript function for creating the table is:

                function createTable() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    let newParent = document.createElement('table');
                    let caption = document.createElement('caption');
                    caption.innerHTML = '<h3>Replace this with title for the table</h3>';
                    newParent.appendChild(caption);
                    
                    let noRows = window.prompt('Enter number of rows (excluding the table header row):');
                    let noColumns = window.prompt('Enter number of Columns:');
                    let trh = document.createElement('tr');
                    for (let i=0; i<noColumns; i++) {
                        let th = document.createElement('th');
                        th.textContent = 'header' + i;
                        trh.appendChild(th);
                    }
                    newParent.appendChild(trh);

                    for (let i=0; i<noRows; i++) {
                        let trr = document.createElement('tr');
                        for (let j=0; j<noColumns; j++) {
                            let tdr = document.createElement('td');
                            tdr.textContent = 'header' + i + j ;
                            trr.appendChild(tdr);
                        }
                        newParent.appendChild(trr);
                    }
                    
                    range.insertNode(newParent);    
                    range.collapse(); 
                }

The first statement in the function obtains a JavaScript memory object that represents the selection. The selection here is just a point and not a sequence of characters. The next statement obtains the range object from the selection object. A range is the starting and ending points of a string of HTML code. The next statement creates a 'table' node object in memory (not yet displayed on screen). The statement that follows creates an independent caption node in memory. The statement after, makes the content of the independent caption node, '<h3>Replace this with title for the table</h3>' "Replace this with title for the table" will have to be replaced by the end user (client). The last statement in that code segment, attaches the independent caption node to the table node (in memory). Nothing is displayed yet. The caption node is no longer independent.

For the next code segment, the user is prompted for the number of rows, which does not include the table header row. The user is next prompted for the number of columns. An independent table-row (tr) node is created in memory. The for-loop compound statement adds table-head cells with contents to this independent table row node. The user will have to replace the table-head cell contents with his/her own contents. The last statement for this code segment, attaches the independent table-row node as a child node to the table node. At this point, nothing is displayed yet on the screen, though the program execution moves so fast that the user does not notice.

For the code segment that follows, there are two for-loops with one nested. These for-loops produce the number of rows inputted by the user, with cells (for the number of columns) and default cell contents. The user will have to replace these default cell contents with his/her own contents. At this point, nothing is displayed yet on the screen

The last code segment has two statements. These code segment displays the default table on the screen. The first statement here, inserts the default table, where the cursor was. The table remains selected. The last statement removes the highlight (selection).

JavaScript Coding for Deleting the Table

Before the table can be deleted, all its contents have to be selected by the end user (either by dragging with the mouse pointer or using shift and arrow keys). When the Delete Table command is clicked, the following JavaScript function executes:

                function deleteTable() {
                    let selection = window.getSelection();
                    let range = selection.getRangeAt(0);
                    range.deleteContents();
                }

The first statement in the function obtains a JavaScript memory object that represents the whole selection. The next statement obtains the range object from the selection object. A range is the starting and ending points of a string of HTML code. The last statement deletes the table.

Style Sheet

If every element in the table has to be styled, then the whole table code will be too long; and that is not advisable. The style sheet for this table has to be in the HTML head element. The style sheet proposed by the author is:

        <style type="text/css">
            table { width: 70%}
            table, th, td {border: 1px solid; border-collapse: collapse}
        </style>

Read through the code if that is not already done.

Conclusion

In order to Create an Editable Table with Spelling Check in HTML Form Word Processor, use the DOM table node features. Use a style sheet like the one given above, instead of styling every element in the table. The style sheet for this table has to be in the HTML head element.

The next and last part of this series, explains how to use the complete installed program (application) and provides the download link. The complete code download is free; and all the knowledge of this seven part series is free.

Chrys