dbまたはserveを使わずに、htmlテーブルの入力フィールド値を.txtに保存する

Question

単純な動的テーブルをhtmlで作成し、テキストの新しい行のテキストフィールドにユーザーの入力値を保存するメソッドを作成する必要がありますフィールド。 アイデア？ 私の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

クライアントサイドJSからファイルを読み書きすることはできません。 ajaxを使用してサーバーにデータを送信し、サーバーマシンに保存することができます。

サーバーを使用しない場合は、ブラウザでのいくつかのデータを保存する方法があります：

• はLocalStorageを使用
• 使用のクッキーを（5メガバイトの周りに制限され、ブラウザによって異なります） （LocalStorageよりも少ないメモリ）

FileSystem APIは現在標準ではないため、すべてのブラウザでサポートされているわけではありません。

Answer 2

NPMプラグイン：https://www.npmjs.com/package/file-saver

やChrome：ファイルシステムAPI、IE：navigator.msSaveBlobなど

bowserは、特定のブラウザをチェックすると、あなたは非ファイルシステムAPIブラウザのフラッシュスクリプトを挿入でき特定の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のサポートが必要です！