完整實例：js將表格table的html代碼轉爲json數據/csv數據/sql指令/txt文本等格式

js將網頁表格數據轉爲json數據/csv數據/sql指令/txt文本等格式，並解析json數據顯示爲表格

<style>
table{border-collapse:collapse;border-left:1px solid #a2c6d3;border-top:3px solid #0180CF; margin:0 auto;width:97.5%;}
table td,th{border-right:1px solid #a2c6d3;border-bottom:1px solid #a2c6d3;padding:2px;word-wrap:break-word;word-break:break-all;}
.tt,th{background:#e5f2fa;line-height:18px;min-width:300px;}
textarea{width:100%;height:168px;margin:10px;}
</style>

<div id="jieguo" style="margin:0 auto;overflow-x:auto;width:98%;">

<table cellspacing="0" id="table">
<thead>
<tr class="tt">
<th>域名</th>
<th>估值(元)</th>
<th>註冊日期</th>
<th>過期日期</th>
<th>註冊商</th>
</tr>
</thead>

<tbody>
<tr>
<td data-label="域名">96cha.com</td>
<td data-label="估值(元)">1200</td>
<td data-label="註冊日期">2015/11/9</td>
<td data-label="過期日期">2020/11/9</td>
<td data-label="註冊商">Alibaba Cloud Computing (Beijing) Co., Ltd.</td>
</tr>

<tr>
<td data-label="域名">chafenba.cn</td>
<td data-label="估值(元)">2000</td>
<td data-label="註冊日期">2016/8/27</td>
<td data-label="過期日期">2021/8/27</td>
<td data-label="註冊商">阿里雲計算有限公司（萬網）</td>
</tr>

<tr>
<td data-label="域名">chafenba.com</td>
<td data-label="估值(元)">20000</td>
<td data-label="註冊日期">2016/8/27</td>
<td data-label="過期日期">2022/8/27</td>
<td data-label="註冊商">Alibaba Cloud Computing (Beijing) Co., Ltd.</td>
</tr>

<tr>
<td data-label="域名">chalide.net</td>
<td data-label="估值(元)">7200</td>
<td data-label="註冊日期">2020/4/2</td>
<td data-label="過期日期">2021/4/2</td>
<td data-label="註冊商">DNSPod, Inc.</td>
</tr>

<tr>
<td data-label="域名">dbcha.com</td>
<td data-label="估值(元)">1500</td>
<td data-label="註冊日期">2015/10/21</td>
<td data-label="過期日期">2020/10/21</td>
<td data-label="註冊商">Alibaba Cloud Computing (Beijing) Co., Ltd.</td>
</tr>

<tr>
<td data-label="域名">echadai.com</td>
<td data-label="估值(元)">2000</td>
<td data-label="註冊日期">2018/10/6</td>
<td data-label="過期日期">2020/10/6</td>
<td data-label="註冊商">DNSPod, Inc.</td>
</tr>

<tr>
<td data-label="域名">echadan.cn</td>
<td data-label="估值(元)">2000</td>
<td data-label="註冊日期">2020/3/20</td>
<td data-label="過期日期">2022/3/20</td>
<td data-label="註冊商">煙臺帝思普網絡科技有限公司</td>
</tr>

<tr>
<td data-label="域名">echadan.com</td>
<td data-label="估值(元)">10000</td>
<td data-label="註冊日期">2018/9/1</td>
<td data-label="過期日期">2022/9/1</td>
<td data-label="註冊商">Alibaba Cloud Computing (Beijing) Co., Ltd.</td>
</tr>

<tr>
<td data-label="域名">echafen.cn</td>
<td data-label="估值(元)">5000</td>
<td data-label="註冊日期">2016/8/29</td>
<td data-label="過期日期">2023/8/29</td>
<td data-label="註冊商">阿里巴巴雲計算（北京）有限公司</td>
</tr>

<tr>
<td data-label="域名">echaxin.cn</td>
<td data-label="估值(元)">1200</td>
<td data-label="註冊日期">2017/7/8</td>
<td data-label="過期日期">2021/7/8</td>
<td data-label="註冊商">阿里巴巴雲計算（北京）有限公司</td>
</tr>

</tbody></table>

<h3>html table to json</h3>
<textarea id="json" placeholder="json"></textarea>
<h3>逗號分開csv文件 可以excel打開</h3>
<textarea id="csv" placeholder="csv"></textarea>
<h3>製表符分開的txt文本，可以複製到excel查看</h3>
<textarea id="txt" placeholder="txt"></textarea>
<h3>mysql語句，假設字段全爲文本，無特殊符號</h3>
<textarea id="sql" placeholder="sql"></textarea>
<h3>JSON顯示回html table表格</h3>
<div id="html"></div>
<h3>html文件，可以xls打開</h3>
<textarea id="xls" placeholder="xls"></textarea>
</div>
<script>
function unhtml(str) {
        return str ? str.replace(/[<">']/g, (a) => {
            return {
                '<': '&lt;',
                '"': '&quot;',
                '>': '&gt;',
                "'": '&#39;'
            }[a]
        }) : '';
    }

function TableToJson(tableid) {
    var txt = "[";
    var table = document.getElementById(tableid);
    var row = table.getElementsByTagName("tr");
    var col = row[0].getElementsByTagName("th");
    for (var j = 1; j < row.length; j++) {
        var r = "{";
        for (var i = 0; i < col.length; i++) {
            var tds = row[j].getElementsByTagName("td");
            r += "\"" + col[i].innerHTML + "\"\:\"" + tds[i].innerHTML + "\",";
        }
        r = r.substring(0, r.length - 1)
        r += "},";
        txt += r;
    }
    txt = txt.substring(0, txt.length - 1);
    txt += "]";
    return txt; 
}

function TableTotxt(tableid) {
    var txt = "";     var r = "";
    var table = document.getElementById(tableid);
    var row = table.getElementsByTagName("tr");
    var col = row[0].getElementsByTagName("th");
        for (var i = 0; i < col.length; i++) {
         r += col[i].innerHTML + "\t";
        }
        txt += r.substring(0, r.length - 1)+"\r\n";
    for (var j = 1; j < row.length; j++) {
         var r = "";
        for (var i = 0; i < col.length; i++) {
            var tds = row[j].getElementsByTagName("td");
            r += tds[i].innerHTML + "\t";
        }
        txt += r.substring(0, r.length - 1)+"\r\n";
    }
    return txt; 
}

function TableTocsv(tableid) {
    var txt = "";     var r = "";
    var table = document.getElementById(tableid);
    var row = table.getElementsByTagName("tr");
    var col = row[0].getElementsByTagName("th");
        for (var i = 0; i < col.length; i++) {
         r += col[i].innerHTML + ",";
        }
        txt += r.substring(0, r.length - 1)+"\r\n";
    for (var j = 1; j < row.length; j++) {
         var r = "";
        for (var i = 0; i < col.length; i++) {
            var tds = row[j].getElementsByTagName("td");
            r += tds[i].innerHTML + ",";
        }
        txt += r.substring(0, r.length - 1)+"\r\n";
    }
    return txt; 
}

function TableTosql(tableid) {
    var txt = "INSERT INTO `tablename` (";     var r = "";
    var table = document.getElementById(tableid);
    var row = table.getElementsByTagName("tr");
    var col = row[0].getElementsByTagName("th");
        for (var i = 0; i < col.length; i++) {
         r += "`"+col[i].innerHTML + "`,";
        }
        txt += r.substring(0, r.length - 1)+") VALUES ";
    for (var j = 1; j < row.length; j++) {
         var r = "(";
        for (var i = 0; i < col.length; i++) {
            var tds = row[j].getElementsByTagName("td");
            r += "'" + tds[i].innerHTML + "',";
        }
        txt += r.substring(0, r.length - 1)+"),";
    }
    return txt.substring(0, txt.length - 1); 
}

var _table_ = document.createElement('table'),
  _tr_ = document.createElement('tr'),
  _th_ = document.createElement('th'),
  _td_ = document.createElement('td');

function buildHtmlTable(arr) {
  var table = _table_.cloneNode(false),
    columns = addAllColumnHeaders(arr, table);
  for (var i = 0, maxi = arr.length; i < maxi; ++i) {
    var tr = _tr_.cloneNode(false);
    for (var j = 0, maxj = columns.length; j < maxj; ++j) {
      var td = _td_.cloneNode(false);
      cellValue = arr[i][columns[j]];
      td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  return table;
}

function addAllColumnHeaders(arr, table) {
  var columnSet = [],
    tr = _tr_.cloneNode(false);
  for (var i = 0, l = arr.length; i < l; i++) {
    for (var key in arr[i]) {
      if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
        columnSet.push(key);
        var th = _th_.cloneNode(false);
        th.appendChild(document.createTextNode(key));
        tr.appendChild(th);
      }
    }
  }
  table.appendChild(tr);
  return columnSet;
}


var jsons = TableToJson("table");
document.getElementById("json").innerHTML = jsons;//html table to json

var jsonx = TableTotxt("table");
document.getElementById("txt").innerHTML = jsonx;//html table to txt

var jsonx = TableTocsv("table");
document.getElementById("csv").innerHTML = jsonx;//html table to csv

var jsonx = TableTosql("table");
document.getElementById("sql").innerHTML = jsonx;//html table to sql


var jsony = buildHtmlTable(JSON.parse(jsons));
document.getElementById("html").appendChild(jsony);//json array to tablehtml

var htmlx = document.getElementById("html").innerHTML;
document.getElementById("xls").innerHTML = unhtml(htmlx);
</script>