Question

我在Google表格中有一个表单，可以从其中发送动态数据。

我循环工作表数据并以与我的标头数量相同的形式创建相同数量的块。

我有第一篇用html编写的元素。我从第一个块中克隆其余块，克隆其ID，然后将工作表标题发送给表单的元素。

我写的第一个标题（数组中的最后一个标题）是循环之前存在的唯一块。

然后我克隆了该块，为克隆提供了新标题，并尝试在第一个块（[0]）之前插入克隆，但是它出错了，并且覆盖了我的第一个硬编码标题。

它以随机数附加块，所以我无法以正确的顺序获得标题，例如“ 1,2,3”。 总是像“ 2,1,1”或“ 1,3,2”等。

我尝试了添加克隆元素的各种变体（例如motherDiv.appendChild(clonedRow)和motherDiv.insertBefore(clonedRow, motherDiv.children[0])，但无法使其正常工作。

请指出这里出了什么问题。

这是代码和屏幕：

//my google app backend function with data    
var numbers = [1, 2, 3]
var stats = ["Валовый доход", "Кол-во клиентов", "Кол-во размещенной рекламы"]

var stats = {

  statNumbers: numbers,
  statStats: stats
}



//select initialization
document.addEventListener('DOMContentLoaded', function() {
  var getstats = getStats();
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
});


//getting stats object
function getStats() {

  google.script.run.withSuccessHandler(processStats).statsObj();
  google.script.run.withFailureHandler(showError).statsObj()

  return;
}


//creating dynamic stats fields in the form
function processStats(stats) {

  //name first statistic with the last number
  var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[stats.statStats.length - 1] + ". " + stats.statStats[stats.statStats.length - 1]

  //mother div
  var motherDiv = document.getElementById("motherDiv")

  //sample row to copy
  var statRow = document.getElementById("statsample");

  //loop stat names
  for (var i = 0; i < stats.statStats.length - 1; i++) {

    var statName = stats.statStats[i]
    var statNumber = stats.statNumbers[i]

    //cloning the original row
    var clonedRow = statRow.cloneNode(true)

    //setting unique ID to whole row
    var rowId = clonedRow.id = "statsample" + i

    //setting unique ID to stat div
    var clonedStatID = motherDiv.getElementsByClassName("statClass")[0].id = "statName" + statNumber

    //stat titles (except first one)
    var statHtml = document.getElementById(clonedStatID).innerHTML = statNumber + ". " + statName;

    var err = document.getElementById("err").innerHTML = motherDiv.children.length

    //appending it to the mother div
    //motherDiv.appendChild(clonedRow);
    motherDiv.insertBefore(clonedRow, motherDiv.children[0]);

  }
  return;
}



function showError() {

  var err = document.getElementById("err").innerHTML = "There was an error."
}

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<div id="motherDiv">
  <!-- mother div -->

  <div class="row" id="statsample">

    <div class=" input-field col s3 #fffde7 yellow lighten-5">
      <h6 id="statName" class="statClass"></h6>
    </div>

    <div class="input-field col s3">
      <select class="icons browser-default" id="weeksSel4">
        <option value="" disabled selected>Неделя</option>
      </select>
    </div>

    <div class="input-field col s2">
      <input id="numbers" type="text" class="validate">
      <label for="numbers">Значение</label>
    </div>

    <div class="input-field col s1.5">
      <select class="icons browser-default" id="measure">
        <option value="" disabled selected>Ед. изм:</option>
        <option value="">шт.</option>
        <option value="">%</option>
        <option value="">$</option>
        <option value="">руб.</option>
        <option value="">грн.</option>
      </select>
    </div>

    <div class="input-field col s2.5">
      <a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" style="float: right;" id="btn1row"><i class="material-icons right">send</i>Ввести</a>
    </div>

  </div>
  <!-- row end -->
</div>
<!-- mother div end-->

<div id="err"> </div>

Answer 1

我建议使用数组的第一个元素填充'master'div，因为克隆开始从索引1遍历数组。我们需要对您的processStats(stats)函数进行一些根本性的更改。首先填充母版：

  var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[0] + ". " + stats.statStats[0];

以下两行保持不变

  var motherDiv = document.getElementById("motherDiv")
  var statRow = document.getElementById("statsample");

将for循环更改为从1开始

  for (var i = 1; i < stats.statStats.length; i++) {
  }

现在，for循环本身需要进行一些更改。这三行都可以

var statName = stats.statStats[i];
var statNumber = stats.statNumbers[i];
var clonedRow = statRow.cloneNode(true);

我不明白的是以下内容

var clonedStatID = motherDiv.getElementsByClassName("statClass")[0].id = "statName" + statNumber

我知道您想给刚克隆的divs子 statClass 一个具有序号的唯一ID，但是对于for循环的每次迭代，这都会为列表中的第一个元素提供ID。在上方，您已经有了一个变量，其中包含对克隆的div clonedRow 的引用，您也可以使用它来访问其子级。

因此摆脱这一行，并使用它：

clonedRow.getElementsByTagName("h6")[0].innerHTML = statNumber + ". " + statName;

现在只需将div附加到父级

motherDiv.appendChild(clonedRow);

这是一个有效的示例-只需单击“运行代码段”即可查看其运行情况：

//my google app backend function with data    
var numbers = [1, 2, 3]
var stats = ["Валовый доход", "Кол-во клиентов", "Кол-во размещенной рекламы"]

var stats = {

  statNumbers: numbers,
  statStats: stats
}

function processStats(stats) {

  //name first statistic with the last number
  var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[0] + ". " + stats.statStats[0];

  //mother div
  var motherDiv = document.getElementById("motherDiv")

  //sample row to copy
  var statRow = document.getElementById("statsample");

  //loop stat names
  for (var i = 1; i < stats.statStats.length; i++) {

    var statName = stats.statStats[i];
    var statNumber = stats.statNumbers[i];
    var clonedRow = statRow.cloneNode(true);
    var rowId = clonedRow.id = "statsample" + i;
    clonedRow.getElementsByTagName("h6")[0].innerHTML = statNumber + ". " + statName;
    var err = document.getElementById("err").innerHTML = motherDiv.children.length
    motherDiv.appendChild(clonedRow);
  }
  return;
}

function showError() {
  var err = document.getElementById("err").innerHTML = "There was an error."
}

processStats(stats);

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<div id="motherDiv">
  <!-- mother div -->

  <div class="row" id="statsample">

    <div class=" input-field col s3 #fffde7 yellow lighten-5">
      <h6 id="statName" class="statClass"></h6>
    </div>

    <div class="input-field col s3">
      <select class="icons browser-default" id="weeksSel4">
        <option value="" disabled selected>Неделя</option>
      </select>
    </div>

    <div class="input-field col s2">
      <input id="numbers" type="text" class="validate">
      <label for="numbers">Значение</label>
    </div>

    <div class="input-field col s1.5">
      <select class="icons browser-default" id="measure">
        <option value="" disabled selected>Ед. изм:</option>
        <option value="">шт.</option>
        <option value="">%</option>
        <option value="">$</option>
        <option value="">руб.</option>
        <option value="">грн.</option>
      </select>
    </div>

    <div class="input-field col s2.5">
      <a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" style="float: right;" id="btn1row"><i class="material-icons right">send</i>Ввести</a>
    </div>

  </div>
  <!-- row end -->
</div>
<!-- mother div end-->

<div id="err"> </div>

克隆时将数据记录到适当的html子元素中

1 个答案: