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

Question

你能告诉我如何使用 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>

Answer 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);

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

问题描述

1 个解决方案

解决方案1
0 2020-11-23 11:47:43

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

问题描述

1 个解决方案

解决方案1 0 2020-11-23 11:47:43

解决方案1
0 2020-11-23 11:47:43