Save input field value from html table into .txt without need to db or serve

Question

I create a simple dynamic table in html and I need to write a method that save user's input value into a text field in a new line in the text field. any ideas? My HTML code looks as below

   <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Selected Row" onclick="deleteRow('dataTable')" />

    <INPUT type="button" value="Save Selected Row" onclick="saveRow('dataTable')" />

    <INPUT type="button" value="Edit Selected Row" onclick="EditeRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD><INPUT type="text" name="dns[]"/></TD>
            <TD><INPUT type="text" name="domain[]"/></TD>
            <TD><INPUT type="text" name="ip[]"/></TD>


        </TR>
    </TABLE>

javascript is only insert and delete rows for now. and saving input is empty for now.

 function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }


    function deleteRow(tableID) 

    {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

    function saveRow(tableID){

        table.saveRow(i);
    }

    function editRow(tableID){

    }

Any idea of what to use? I would rather use javascript as the entire operation is running locally on my local machine.

Answer 1

This is not complete example, perhaps can give you pointers.

function txt(link) {
  link.setAttribute('href', 'data:text/plain,' + encodeURI(document.getElementById('save').value));
}

<input type='text' value='Hello world' placeholder='Save as .txt' id='save' autofocus='' />
<a id='link' target='_blank' onclick='txt(this);' download='note.txt'><input type='button' value='Save as .txt' /></a>

PS. this requires HTML 5 support!