title: Sending filtered HTML web app table data back to Google Sheets using Apps Scripts
body: <p>Currently, I'm trying to pull the filtered district data from my table and submit it to a column in my google sheets. I'm able to manually input data directly into my google sheets, but I can't figure out how to pull the data I've filtered in my data and input it into the sheets.</p>
  <pre><code>function onSuccess() {
    alert('Your request has ben submitted');
  }
  
  function buttonFunction() {
    var table = document.getElementById(&quot;myTable&quot;);
    var rows = table.getElementsByTagName(&quot;tr&quot;);
    var cells = rows.getElementsByTagName(&quot;td&quot;);
    var cellvalue = (cells[0].innerText);
  
    google.script.run.withSuccessHandler(onSuccess).setValue(cellvalue);
  }
  
  function generateTable(dataArray) {
        var tbody = document.getElementById(&quot;table-body&quot;);
        var counter = 0;
        for (var row in dataArray)  {
          var row = document.createElement(&quot;tr&quot;);
          var col1 = document.createElement(&quot;td&quot;);
          var col2 = document.createElement(&quot;td&quot;);
          var col3 = document.createElement(&quot;td&quot;);
          var col4 = document.createElement(&quot;td&quot;);
          var col5 = document.createElement(&quot;td&quot;);
          var col6 = document.createElement(&quot;td&quot;);
  
          col1.textContent = dataArray[counter][0];
          col2.textContent = dataArray[counter][1];
          col3.textContent = dataArray[counter][2];
          col4.textContent = dataArray[counter][3];
          col5.textContent = dataArray[counter][4];
          col6.textContent = dataArray[counter][5];
  
          row.appendChild(col1);
          row.appendChild(col2);
          row.appendChild(col3);
          row.appendChild(col4);
          row.appendChild(col5);
          row.appendChild(col6);
  
          tbody.appendChild(row);
          counter +=1; 
        }
  }
  
  function filterFunction() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById(&quot;myInput&quot;);
    filter = input.value.toUpperCase();
    table = document.getElementById(&quot;myTable&quot;);
    tr = table.getElementsByTagName(&quot;tr&quot;);
  
    // Loop through all table rows, and hide those who don't match the search query
    for (i = 0; i &lt; tr.length; i++) {
      td = tr[i].getElementsByTagName(&quot;td&quot;)[3]
      
      if (td ) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
          tr[i].style.display = &quot;&quot;;
        } else {
          tr[i].style.display = &quot;none&quot;;
        }
      }
    }
  }
  </code></pre>
  <p>setValue function</p>
  <pre><code>function setValue(value) {
    var ss = SpreadsheetApp.openByUrl(url);
    var targetSheet = ss.getSheetByName('Target Lists');
    targetSheet.getRange(1,ws.getLastColumn()+1,1,2).setValue(value);
  }
  </code></pre>
  <p>table html</p>
  <pre><code>&lt;table class=&quot;table table-hover&quot; id=&quot;myTable&quot; 
       data-custom-sort=&quot;customSort&quot;
    data-pagination=&quot;true&quot;
    data-ajax-options=&quot;ajaxOptions&quot;
    data-url=&quot;json/data1.json&quot;&gt;
                  &lt;div class=&quot;dropdown&quot;&gt;
                      &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                          District
                      &lt;/button&gt;
                      &lt;input type=&quot;text&quot; placeholder=&quot;Search..&quot; id=&quot;myInput&quot; onkeyup=&quot;filterFunction()&quot;&gt;
                      &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
                          &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Emery Unified&lt;/a&gt;
                          &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Mountain House Elementary&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th scope=&quot;col&quot;&gt;County&lt;/th&gt;
                          &lt;th scope=&quot;col&quot;&gt;District&lt;/th&gt;
                          &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt;
                          &lt;th scope=&quot;col&quot;&gt;Full Name&lt;/th&gt;
                          &lt;th scope=&quot;col&quot;&gt;Date&lt;/th&gt;
                          &lt;th scope=&quot;col&quot;&gt;Note&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody id=&quot;table-body&quot;&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;listName&quot; placeholder=&quot;Type Name Here&quot; aria-label=&quot;Username&quot; aria-describedby=&quot;basic-addon1&quot;&gt;
              &lt;button class=&quot;btn btn-dark&quot; type=&quot;save&quot; id=&quot;saveButton&quot;&gt;Save&lt;/button&gt;
          &lt;/div&gt; &lt;!-- CLOSE AUTOFLOW --&gt;
          &lt;button onclick='buttonFunction()'&gt;Submit&lt;/button&gt;
  </code></pre>
  <p>You can ignore my extra submit functions-I was testing out some other options.</p>