将 HTML 表格行发送回 Google 表格

Question

我需要为每个表格行创建按钮，一旦单击，就会将整行发送回另一张工作表（并为其加上时间戳）。 我目前正在从数组生成表，但在访问其中的元素时遇到问题。 .getElementbyId() 和 .getElementbyId().appendChild 方法都不能访问按钮值。 我可以将其他表单元素保存回我的 Google 表格，但不能保存整个行。 另外，有没有更好的方法呢？我仍然不知道如何为多个按钮编写代码...

Javascript

function generateScheduleTable(dataArray){
    var tbody = document.getElementById("table-body-schedule");
    tbody.innerHtml="";

    dataArray.forEach(function(r, i){
      
      var row = document.createElement("tr");
      var col1 = document.createElement("td");
      col1.textContent = r[0];
      var col2 = document.createElement("td");
      col2.textContent = r[1];
      var col3 = document.createElement("td");
      col3.textContent = r[2];
      var col4 = document.createElement("td");
      col4.textContent = r[3];
      var col5 = document.createElement("td");
      col5.textContent = r[4];
      var col6 = document.createElement("td");
      col6.textContent = r[5];
      var col7 = document.createElement("button");
      col7.className = "btn";
      col7.id = "passbtn" +i;
      col7.innerHTML = "PASS";
      
      row.appendChild(col1);
      row.appendChild(col2);
      row.appendChild(col3);
      row.appendChild(col4);
      row.appendChild(col5);
      row.appendChild(col6);
      row.appendChild(col7);
      tbody.appendChild(row);
      col7.value = r;
      console.log(col7);
    });

    document.querySelectorAll('.btn').forEach(item => {
    item.addEventListener('click', event => {
    handleFormSubmit(passbtn0);
        })
    });

  }

function preventFormSubmit() {
var forms = document.querySelectorAll('form');    
document.getElementById('datestamp').value = document.getElementById('ct5').innerHTML;
document.getElementById('student_id').addEventListener("input",getStudentInfo); 
document.getElementById('event_id').addEventListener("select",DropDowns); 

 for (var i = 0; i < forms.length; i++) {
  forms[i].addEventListener('submit', function(event) {
  event.preventDefault();
  });
}

function handleFormSubmit(formObject) {
   document.getElementById('datestamp').value = document.getElementById('ct5').innerHTML;
   document.getElementById('student_id').select();
   document.getElementById('passbtn0').innerHTML;
   google.script.run.processForm(formObject);
}

HTML

<form id="myForm" onsubmit="handleFormSubmit(this)">
      <h3 class="text">Test App</h3>
      
      <div class = "submissions" id="event_id">
        <label for="event_id">Event Type</label>
           <select type="text" class="submissions" id="event_id" name="event_id">
         <option value = "" disabled selected>Select Event</option>
          <? for (var i=0; i<list.length;i++){ ?>
        <option><?= list[i]; ?></option>
      <? } ?>
           </select>               
    </div>

    <div class="form-group">

      <label for="room">Scan Location</label>
      <input class="submissions" type="text" id="room" name="room" placeholder="Scan Location">
    </div>

    <div class="form-group">
      <label for="student_id">Student ID</label>
      <input class="submissions" type="text" id="student_id" name="student_id" placeholder="Student ID" autofocus required>
    </div>

    <div class="form-group">
      <label class ="active" for="student_info">Student Information</label>
      <input disabled class="submissions" type="text" class="flow-text" id="student_info" name="student_info" placeholder="Student Information">

          <div class="row col s12" id="buttons">
          <br>
          <h5 class="text">Student Schedule</h5>
                <table class="striped">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Class</th>
                    <th>Period</th>
                    <th>Teacher</th>
                    <th>Room</th>
                    <th>Issue Pass</th>
                    <th>Hall Sweep Time</th>
                  </tr>
                </thead>
                <tbody id="table-body-schedule">
                
                </tbody>
                </table>
          </div>  
    </div>

  <div class="form-group">
        <input class="form-control form-control-lg" type='hidden' class="form-control" value='12356' name='datestamp' id='datestamp'>
        <br>
        <span id='ct5' class="flow-text text-warning" type="text" value=""></span>
   </div>

</form>

代码.gs

function processForm(formObject){ 

  var sheet = ss.getSheetByName('Log');
  sheet.appendRow([formObject.datestamp,
                formObject.student_id,
                formObject.passbtn0,
                formObject.room
                //formObject.email
                ]);
}

Answer 1

这个怎么样？

没有理由通过 html 对话框

function appendSingleRow() {//select a single row by selected a cell on that row
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getSheetByName('Sheet0');
  const dsh = ss.getSheetByName('Sheet1');
  const vs = sh.getRange(sh.getActiveRange().getRow(),1,1,sh.getLastColumn()).getValues().flat();
  dsh.appendRow(vs);
}

或

function appendAllRows() {
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getSheetByName('Sheet0');
  const dsh = ss.getSheetByName('Sheet1');
  const vs = sh.getActiveRange().getValues();
  vs.forEach(r => dsh.appendRow(r));
}

或

function appendAll() {
  const ss = SpreadsheetApp.getActive();
  const sh = ss.getSheetByName('Sheet0');
  const dsh = ss.getSheetByName('Sheet1');
  const vs = sh.getActiveRange().getValues();
  dsh.getRange(dsh.getLastRow()+1,1,vs.length,vs[0].length).setValues(vs);
}