HTML table to JS array

Question

I am struggling to get the values from an HTML table and paste it to a Google Sheet via SetValues.

With the click of a button an HTML popup appears.
In that popup there's an HTML table where the user will make some inputs
When they click on "btn" button it triggers the function pasteBrief() within the script section in HTML
This function then triggers a Google Script pasteBriefVal(tableval) on the GS Server side and sends the values to a specific range.
The issue: I know the values are pushed into the array, but I suspect they don't get properly structured so the setValues can paste it accordingly.

HTML: table

<div>
    <img src="https://i.ibb.co/LZ1S1ZD/plus-sign.png" onclick="newRows()" width="25px" height="auto"></img>
    <img src="https://i.ibb.co/GP6GKdn/minus-sign.png" onclick="newRowssss()" width="25px" height="auto"></img>
    <button id="btn" onclick="pasteBrief()" style="color: #63d297;">Generate Brief</button>

    <table id="brief_table">
      <thead>
          <tr>
              <th>Content category</th>
              <th>Description</th>
              <th>Content type</th>
              <th>Format</th>
              <th>Channel</th>
              <th>Assets</th>
              <th>Start date</th>
              <th>End date</th>
              <th>Relevant links</th>
              <th>Comments</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td contenteditable='true'></td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'></td>
              <td contenteditable='true'></td>
              <td contenteditable='true'></td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
          </tr>
      </tbody>
  </table>
</div>

<script>
function pasteBrief() {    
  var table = document.getElementById("brief_table");
  var tablevalues = [];
  var tablevaluesr = []; // do I need to arrays instead of one???
  var tablevaluesc = []; // just playing with different combination of these as I'm unsure how to make it work

  for (var r = 0, n = table.rows.length; r < n; r++) {
    for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
      tablevalues.push([table.rows[r].cells[c].innerHTML]);
    }

  }
  google.script.run.pasteBriefVal(tablevalues);
}

</script>

GS paste values onto Spreadsheet

function pasteBriefVal(tableval){      SpreadsheetApp.getActive().getSheetByName('Sheet1').getRange('b1:u').setValues(tableval);
}

I'm contemplating closing this question as a duplicate of [this](https://stackoverflow.com/questions/55650581/transfer-a-html-table-user-input-to-google-sheets/55653038#55653038) and [this](https://stackoverflow.com/questions/63720612/what-does-the-range-method-getvalues-return-and-setvalues-accept). Kindly read through and let me know it those don't help. — TheMaster, Jun 14 '22 at 14:21

Mike Steelson · Accepted Answer · 2022-06-14T17:08:11.190

Try in html

  <script>
    function pasteBrief() {    
      var table = document.getElementById("brief_table");
      var tablevalues = [];
      for (var r = 0, n = table.rows.length; r < n; r++) {
        var temp= []
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
          temp.push([table.rows[r].cells[c].innerHTML]);
        }
        tablevalues.push(temp)
      }
      google.script.run.pasteBriefVal(tablevalues);
    }
  </script>

and in gs

function pasteBriefVal(tableval) {
  SpreadsheetApp.getActive().getSheetByName('Sheet1').getRange(1,1,tableval.length,tableval[0].length).setValues(tableval);
}

you need 2D array

HTML table to JS array

1 Answers1