将 html table 中的输入字段值保存到 .txt 中，无需 db 或服务

Question

我在 html 中创建了一个简单的动态 table，我需要编写一个方法，将用户的输入值保存到文本字段中的新行中的文本字段中。有任何想法吗？我的 HTML 代码如下所示

   <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 目前只是插入和删除行。保存输入暂时为空。

 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){

    }

知道要用什么吗？我宁愿使用 javascript，因为整个操作是运行在我的本地计算机上本地进行的。

Answer 1

您不能 read/write 来自客户端 JS 的文件。您可以使用 ajax 将数据发送到您的服务器并将其保存在您的服务器计算机上。

如果你不想使用服务器，有一些方法可以在浏览器中保存一些数据：

使用LocalStorage（限制在 5MB 左右，可能因浏览器而异）
使用 cookie（甚至比 LocalStorage 占用更少的内存）

FileSystem API 目前是非标准的，所以并不是所有的浏览器都支持它。

Answer 2

npm 插件：https://www.npmjs.com/package/file-saver

或Chrome：文件系统API、IE：navigator.msSaveBlob等

bowser 来检查特定的浏览器，您可以稍后为非文件系统 API 浏览器注入 flash 脚本，或者使用它们特定的 JS 库到本机系统界面。

Answer 3

这不是完整的例子，也许可以给你指点。

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。这需要HTML 5个支持！

将 html table 中的输入字段值保存到 .txt 中，无需 db 或服务

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

html

javascript

input-field