Question

我正在继续上一个项目：Google Sheet Data in a Sidebar

现在，我想检索在边栏中已检查的项目，并将该数据返回到Code.gs文件，最后返回到Google表格（请参见下面的代码）。您可以提供有关此操作的建议吗？

下面，我试图将选中的项目添加到“学生”数组中。然后，我希望使用“提交早期发布”按钮将“学生”数组发送到Code.gs文件。但是，我不确定如何将选中的项目正确地推送到数组。

Page.html

> <!DOCTYPE html>
><html>
>  <head>
>     <base target="_top">
>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
>  </head>
>    <body>
>     <script>
>     function addStudents(studentList){ 
>       $('#rangeResult').text(studentList);
>       
>       document.write(new Date().toLocaleDateString());
>       
>       var students = [];
>       for (var i = 0; i < studentList.length; i++) {
>         document.write('<br><input type="checkbox" name="studentList[i]" id="i" value="i">'+ studentList[i]);
>       }
>       document.write('<br><input type="button" value="Submit Early Release" onclick="google.script.host.close()" />');
>       document.write('<input type="button" value="Close" onclick="google.script.host.close()" />');
>     };
>     
>     google.script.run.withSuccessHandler(addStudents).earlyReleaseList();
>     </script>
>   </body>
></html>

谢谢您的帮助！

更新

Madhav，谢谢您的建议。我已经对您的代码进行了调整以适合我的情况，但是仍然无法将数组数据返回到电子表格。具体来说，当我单击“提交早期发布”按钮时，边栏将关闭，但没有数据写入指定的单元格。你介意看看吗？

Page.html

为jquery添加了另一条“ src =”行-不确定是否需要？？

添加了“ collectNames”功能以获取选中的名称并将其发送回

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
    <script>
    function addStudents(studentList){ 
      $('#rangeResult').text(studentList);

      document.write(new Date().toLocaleDateString());

      //var students = [];

      for (var i = 0; i < studentList.length; i++) {
        document.write('<br><input type="checkbox" class="special" name='+ studentList[i]+ 'id="i" value="i">'+ studentList[i]);
      }
      document.write('<br><input type="button" value="Submit Early Release" onclick="collectNames()" />');
      document.write('<input type="button" value="Close" onclick="google.script.host.close()" />');
    };

    function collectNames(){
      var students = [];
      var checkboxes=document.getElementsByClassName("special");  //get all checkboxes
      for(var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
          students.push(checkboxes[i].getAttribute("name")); //if checked then push to array the value
        }
      }
      //now send the finalarray to the destination
      google.script.run.releasedStudents(students);
      google.script.host.close();
    };

    google.script.run.withSuccessHandler(addStudents).earlyReleaseList();
    </script> 
  </body>
</html>

Code.gs

function releasedStudents(values) {  
  var doc = SpreadsheetApp.openById("1OF6Y1CTU9dkIgd1P-nw-5f2lqHSS5cGZytndwzJhw-o");
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var cell = ss.getRange('V20').getValue();
  cell.setValue(values);
}

Answer 1

如果要将选中的项目推送到数组中，则需要确保的第一件事是，每个复选框均以某种形式或其他形式携带它所表示的值。您的代码确实尝试这样做，但是在您编写时

document.write('<br><input type="checkbox" name="studentList[i]" id="i" value="i">'+ studentList[i]);

每个复选框的name属性始终是相同的，因为它是一个常量字符串（“ studentList [i]”），而不是数组中的值，因此应将其替换为：

document.write('<br><input type="checkbox" class="special"name='+studentList[i]+ ' id="i" value="i">'+ studentList[i]);

完成输入后，我们应该只能从复选框中收集值。.一种方法是为所有复选框分配一个类，以便以后可以通过getElementsByClassName（）访问它们功能。

获得后，仅将那些复选框的value属性推送到具有checked属性为true的数组。

展示此代码的代码略有不同：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <button id="clickthis">Click this</button>


</body>
<script>

    var studentList=["nevil","ron","draco","harry"];
    var finalarray=[];

    function runmyfun(){

            var checkboxes=document.getElementsByClassName("special");  //get all checkboxes
        for(var i=0;i<checkboxes.length;i++){
            if(checkboxes[i].checked){

               finalarray.push(checkboxes[i].getAttribute("name"));      //if checked then push to array the value

            }
        }

        //now send the finalarray to the destination
       }


        document.getElementById("clickthis").onclick=function(){

        document.write(new Date().toLocaleDateString());


        for (var i = 0; i < studentList.length; i++) {
        document.write('<br><input type="checkbox" class="special"name='+studentList[i]+ ' id="i" value="i">'+ studentList[i]);   //concat properly
      }
       document.write('<br><input type="button" value="Submit Early Release" onclick="runmyfun()" />');
      document.write('<input type="button" value="Close" onclick="google.script.host.close()" />');
     };


    </script>
</html>

我希望这是您想要的，而不是其他。

如何从多个HTML复选框中收集数据并将其输入到Google表格中？

1 个答案: