使用 javascript jquery 3.5.1 获取所有表格元素的值，包括 td、textarea 或 innerHtml 值答案

【问题标题】：Get all table elements' values with javascript jquery 3.5.1, including td, textarea or innerHtml values使用 javascript jquery 3.5.1 获取所有表格元素的值，包括 td、textarea 或 innerHtml 值
【发布时间】：2020-11-22 19:40:37
【问题描述】：

您能告诉我如何使用 jquery 获取任何 html 表格的元素值吗？我可以获得 textarea 值或 td 值，但我想同时检索这两者以及更多的未来。现在我无法将修改后的 textarea 值保存在本地文件中

注意：该表通常应该来自导入一个json文件，该文件将与本地js服务器一起保存在本地

<html>
    <head>
        <title>Rockin' Page</title>
        <script type="text/javascript" src="jquery-3.5.1.js"></script>  
        </head>
    <body>
        <textarea id="textbox">Type something here</textarea> <button id="create">Sauvegarder</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a>

<table id="example-table" class="table table-striped">
<thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
</thead>
<tbody>
<tr id"pop1"><td><textarea class="textbox" id="col1">bla bla A1</textarea></td><td><textarea id="textbox">bla bla B1</textarea></td><td><textarea id="textbox">bla bla C1</textarea></td></tr>

<tr id"pop2"><td><textarea class="textbox" id="col2">bla bla A2</textarea></td><td><textarea id="textbox">bla bla B2</textarea></td><td><textarea id="textbox">bla bla C2</textarea></td></tr>

<tr id"pop3"><td><textarea class="textbox" id="col3">bla bla A3</textarea></td><td><textarea id="textbox">bla bla B3</textarea></td><td><textarea id="textbox">bla bla C3</textarea></td></tr>

<tr><td>A4</td><td>B4</td><td>C4</td></tr>
</tbody>
</table>

    </body>
    <script type="text/javascript">
        
(function Enregistrer() {

  var textFile = null,
  makeTextFile = function (text) {

    var formattedText = text.replace(/\n/g, '\r\n') // garde les retours à la ligne in textarea

    var data = new Blob([formattedText], {type: 'text/plain'});

    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    return textFile;
  };

  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.createElement('a');
    link.setAttribute('download', 'info.txt'); // nom fichier enregistré downloadé
    link.href = makeTextFile(textbox.value+'\n '+ParseurTable()); // collecte données à enregistrer
    document.body.appendChild(link);

    window.requestAnimationFrame(function () {
      var event = new MouseEvent('click');
      link.dispatchEvent(event);
      document.body.removeChild(link);
        });
    
  }, false);
})();


function ParseurTable(){
 
var myRows = [];
var $headers = $("th");
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("textarea"),$(this).find("td");
  myRows[index] = {};
  $cells.each(function(cellIndex) {
    myRows[index][$($headers[cellIndex]).html()] = $(this).html();
  });    
});

var myObj = {};
myObj.myrows = myRows;
 return JSON.stringify(myObj);
}

    </script>
</html>

【问题讨论】：

有一种方法可以通过调用 jquery 函数is() 来查看元素是什么，例如$("<div></div>").is("div") 将返回true。然后您可以运行此类检查以确定持有元素是什么以及值应该如何提取。
好的，谢谢，我试试

标签： javascript html jquery textarea

【解决方案1】：

我无法从 textareas 中检索手动更新的数据，因为它们有 innerHtml 预填充的内容。解决方案是 .val() 来获取 textarea 的内容

function ParseurTable(){
 
    var table = $("table tbody");
    var $headers = $("th");
    var total = [];
    var nbLignes = total.length;
    
    table.find('tr').each(function (index) {
        var $Colonnes = $(this).find('textarea'),
            Colonne1 = $Colonnes.eq(0).val(),
            Colonne2 = $Colonnes.eq(1).val(),
            Colonne3 = $Colonnes.eq(2).val(),
            Colonne4 = $Colonnes.eq(3).val();
        total[index] = 'A' + (index + 1) +" : "+ Colonne1 +' ; B' + (index + 1) +" : "+ Colonne2 +' ; C' + (index + 1) +" : "+ Colonne3;
    });
//alert($("#notes").val());

var myObj = {}; // put data in object and convert to JSON
myObj.myrows = total;
 return JSON.stringify(myObj);

【讨论】：