在txt文件中保存可编辑的表

时间:2017-11-14 13:05:08

标签: javascript html

我有这个可编辑的表格。

如何保存txt文件中的所有数据(已修改或未修改)?



var cell = null; //Focus Zero

function modify(obj) {
  if (cell == null) {
    cell = obj; //Create "Cell"
    obj.innerHTML = "<input type='text' id='newtext' value='" + obj.innerHTML + "' onChange='save();' style='border:none'></input>";
    document.getElementById("newtext").focus();
  }
}

function save() //function for save the focus
{
  var nuovoVal = document.getElementById("newtext").value;
  cell.innerHTML = nuovoVal;
  cell = null;
}
&#13;
<TABLE border=2>
  <TR>
    <TD onclick="modify(this);">Denzel Washington</TD>
  </TR>
  <TR>
    <TD onclick="modify(this);">Robert De Niro</TD>
  </TR>

</TABLE>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我使用contenteditable ...

代替修改功能

对于.txt下载,我使用了Blob ......

希望这会有所帮助......

&#13;
&#13;
var cell = null; //Focus Zero



$('#save-link').click(function ()
{
  var retContent = [];
  var retString = '';
  $('tr').each(function (idx, elem)
  {
    var elemText = [];
    $(elem).children('td').each(function (childIdx, childElem)
    {
      elemText.push($(childElem).text());
    });
    retContent.push(`(${elemText.join(',')})`);
  });
  retString = retContent.join(',\r\n');
	var file = new Blob([retString], {type: 'text/plain'});
  var btn = $('#save-link');
  btn.attr("href", URL.createObjectURL(file));
  btn.prop("download", "data.txt");
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE border=2>
  <TR>
    <TD contenteditable="true">Denzel Washington</TD>
  </TR>
  <TR>
    <TD contenteditable="true">Robert De Niro</TD>
  </TR>

</TABLE>
<a href="#" id="save-link">Download</a>
&#13;
&#13;
&#13;