How to save Html table data in .txt file?

Question

This is my Html Table.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email Id</th>
      <th>Phone Number</th>
      <th>Prefered Contact</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      <td>Miles</td>
      <td>james@abcd.com</td>
      <td>9876543210</td>
      <td>email</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Paul</td>
      <td>john@abcd.com</td>
      <td>9638527410</td>
      <td>phone</td>
    </tr>
    <tr>
      <td>Math</td>
      <td>willams</td>
      <td>Math@abcd.com</td>
      <td>99873210456</td>
      <td>phone</td>
    </tr>
  </tbody>
</table>

In this table there is Save Button.

<input type="button" id="txt" value="Save" />

Button Code

function tableToJson(table) {
  var data=[];
  var headers=[];
  for (var i=0;
  i < table.rows[0].cells.length;
  i++) {
    headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
  }
  for (var i=1;
  i < table.rows.length;
  i++) {
    var tableRow=table.rows[i];
    var rowData= {}
    ;
    for (var j=0;
    j < tableRow.cells.length;
    j++) {
      rowData[headers[j]]=tableRow.cells[j].innerHTML;
    }
    data.push(rowData);
  }
  return data;
}

When the click the save button, The html table data will stored in the .txt document without <table>,<tr>,<td>. The data storing format will be like below format.

(James,Miles,james@abcd.com,9876543210,email),
(John,Paul,john@abcd.com,9638527410,phone),
(Math,willams,Math@abcd.com,99873210456,phone)

See http://stackoverflow.com/questions/13405129/javascript-create-and-save-file — OregonTrail, Jan 31 '17 at 07:50
But where exactly is you problem, what is the line or expression that does not work / you need help with? — Marcel P, Jan 31 '17 at 07:51
i need to save html table data's in the .txt file without and and tags. — Bhavanaditya, Jan 31 '17 at 07:53
@BA-T yes you've already said that. But then you posted some code that looks like an attempt. So...we need to know, what are you stuck on exactly? Does some part of it not work, specifically? — ADyson, Jan 31 '17 at 08:56

luungoc2005 · Accepted Answer · 2017-01-31T09:31:39.070

Slightly clearer code than the above answer that works for any number of columns

var retContent = [];
var retString = '';
$('tbody 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');

jsfiddle with the full code

Mihai Alexandru-Ionut · Answer 2 · 2017-01-31T10:52:55.620

3

First of all, you have to create data which contains all user details.

userDetails='';
$('table tbody tr').each(function(){
   var detail='(';
   $(this).find('td').each(function(){
        detail+=$(this).html()+',';
   });
   detail=detail.substring(0,detail.length-1);
   detail+=')';
   userDetails+=detail+"\r\n";
});

Then you need to save file:

var a=document.getElementById('save');
a.onclick=function(){
    var a = document.getElementById("save");
    var file = new Blob([userDetails], {type: 'text/plain'});
    a.href = URL.createObjectURL(file);
    a.download = "data.txt";
}

Here is a working solution: jsfiddle.

edited Jan 31 '17 at 10:52

answered Jan 31 '17 at 09:02

Mihai Alexandru-Ionut

47,092
13
101
128

thanks its working but () only missing that i added. – Bhavanaditya Jan 31 '17 at 10:47
and , also missing so only – Bhavanaditya Jan 31 '17 at 11:53

How to save Html table data in .txt file?

2 Answers2