динамически добавлять радио и выпадающий список в HTML с JavaScript и возвращать данные обратно - PullRequest
Новая
       32

динамически добавлять радио и выпадающий список в HTML с JavaScript и возвращать данные обратно

0 голосов
/ 19 сентября 2019

Я создаю веб-приложение Google, в котором я собрал одномерный массив из электронной таблицы.

Теперь задача Part создает радиокнопку и dropdownList со счетчиком этого массива в HTML и извлекает пользовательский вводобратно в электронную таблицу.

Вот что я делал до сих пор: -

Html ---> 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <?!= include('page-css'); ?>
  </head>
  <body>
<form id="myform">
<table class="striped" width="100">
  <thead>
    <tr>
      <th>Agent</th> 
      <th>S1</th>
      <th>S2</th>
      <th>S3</th> 
      <th>Weekoff-1</th>
      <th>Weekoff-2</th>
    </tr>
  </thead>
  <tbody id="perf"></tbody>
</table>
  <input type="submit"/>
</form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <?!= include('roster-js'); ?>
    </body>
</html>

и, наконец, где мне нужна помощь JavaScript-интерфейссторона: -> 

<script>
document.addEventListener('DOMContentLoaded', function(){

google.script.run.withSuccessHandler(getRosterData).loadRoster();
//getTable1Data(data);
});


function getRosterData(dataArray) {

let weeksArray = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

let tbody = document.getElementById("perf");

dataArray.forEach(function(ele) {
  // creating row element for each agent
  const tableRow = document.createElement("tr");

  // create td elements
  var agentTD = document.createElement("td");
  agentTD.setAttribute("id", "agent"+ ele);
  var t = document.createTextNode(ele);
  agentTD.appendChild(t);

  // create td elements with unique ids
  var s1TD = document.createElement("td");
  s1TD.appendChild(createRadioButton( "s1-" + ele));

  // create td elements with unique ids
  var s2TD = document.createElement("td");
  s2TD.appendChild(createRadioButton( "s2-" + ele));

  // create td elements with unique ids
  var s3TD = document.createElement("td");
  s3TD.appendChild(createRadioButton( "s3-" + ele));

  // create td elements with unique ids
  var w1TD = document.createElement("td");
  w1TD.appendChild(createDropdown("w1-" + ele));

   // create td elements with unique ids
  var w2TD = document.createElement("td");
  w2TD.appendChild(createDropdown("w2-" + ele));

  // append td to table row
  tableRow.appendChild(agentTD);
  tableRow.appendChild(s1TD);
  tableRow.appendChild(s2TD);
  tableRow.appendChild(s3TD);
  tableRow.appendChild(s3TD);
  tableRow.appendChild(w1TD);
  tableRow.appendChild(w2TD);

  tbody.appendChild(tableRow);
});

function createRadioButton(id) {
  //create a radio button
  var radio = document.createElement("input");
  radio.setAttribute("type", "radio");
  radio.setAttribute("id", id);
  return radio;
}

function createDropdown(id) {
  //create a radio button
  var fragment = document.createDocumentFragment();
  var select = document.createElement('select');
  select.setAttribute("id", id);
  weeksArray.forEach(function (day) {
    select.options.add( new Option(day, day));
  });
  fragment.appendChild(select);
  return fragment;
}

document.getElementById("myform")
}

</script>

Этот вопрос слишком велик.В любом случае, теперь мне нужна помощь, чтобы заполнить html-страницу списком имен, которые я собрал из таблицы Google, и одновременно добавить 3 переключателя и раскрывающийся список соответственно.В конце захвата данных, если пользователь отправляет форму.Пожалуйста, дайте мне знать, если потребуется больше разъяснений.

Вот результат на данный момент: -

Out Come

1 Ответ

2 голосов
/ 19 сентября 2019

Это можно сделать с помощью Фрагменты документа .Вы можете прочитать больше об этом здесь: Фрагменты документа

Например, для создания списка: 

function getRosterData(dataArray) {
  let tbody = document.getElementById('perf');

  var fragment = document.createDocumentFragment(),
  select = document.createElement('select');

  dataArray.forEach(function(r) {
    select.addChild(r, r);
  }
}

Параметры используется для создания параметров дляраскрывающийся список.

Точно так же вы можете использовать document.createElement() для создания переключателей с некоторыми уникальными идентификаторами, которые вы можете позже использовать для захвата данных при их отправке.

Codepen : я создал небольшой кодекс, чтобы помочь с ним: его можно посмотреть здесь Код кодекс

...