1

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.

Mindan
  • 979
  • 6
  • 17
  • 37

3 Answers3

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!

0

You can't read/write files from client-side JS. You can send the data to your server using ajax and save it on your server machine.

If you don't want to use server, there are ways to save some data in browser:

  • use LocalStorage (limited to around 5MB, may vary depending on the browser)
  • use cookies (even less memory than LocalStorage)

The FileSystem API is currently non-standard, so not all browsers support it.

An0num0us
  • 961
  • 7
  • 15
0

npm plugin: https://www.npmjs.com/package/file-saver

or Chrome: FileSystem API, IE: navigator.msSaveBlob, etc.

bowser to check for specific browsers, and you could inject a flash script for non-Filesystem API browsers at a later time, or use their specific JS library to native system interface.

neaumusic
  • 10,027
  • 9
  • 55
  • 83