Tbales Данные не публикуются при свертывании - PullRequest
0 голосов
/ 27 марта 2020

Мне нужна помощь. Первый раз в стеке, так что здесь мы go я создал форму, чтобы попытаться улучшить мой рабочий процесс. Но я застрял, я могу выяснить, как получить данные из моих таблиц на листы Google. Если таблица не свернута, я получаю данные с помощью функций моей смородины, но когда они свернуты, я не получаю никаких данных обратно. Я нашел код для возврата данных в таблицах от кого-то еще некоторое время go и использовал его в другом проекте, но не использовал складные таблицы. Я пытаюсь получить информацию, которую пользователь вводит в электронную таблицу Google, как только пользователь идет вперед и отправляет Спасибо, продвинутый

var $BTN = $("#export-btn");
var $BTN2 = $("#export-btn");
// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function() {
  var $TABLE1 = $("#tableDependants");
  var $EXPORT = $("#export");

  var $rows = $TABLE1.find("tr:not(:hidden)");
  var headers = [];
  var data = [];

  // Get the headers (add special header logic here)
  $($rows.shift())
    .find("th:not(:empty)")
    .each(function() {
      headers.push($(this).text().toLowerCase());
    });

  // Turn all existing rows into a loopable array
  $rows.each(function() {
    var $td = $(this).find("td");
    var h = {};

    // Use the headers from earlier to name our hash keys
    headers.forEach(function(header, i) {
      h[header] = $td.eq(i).text();
    });

    data.push(h);
  });

  // Output the result
  $EXPORT.text(JSON.stringify(data));
});

$BTN2.click(function() {
  var $TABLE2 = $("#tableIncome");
  var $EXPORT2 = $("#export2");
  var $rows2 = $TABLE2.find("tr:not(:hidden)");
  var headers2 = [];
  var data2 = [];

  // Get the headers (add special header logic here)
  $($rows2.shift())
    .find("th:not(:empty)")
    .each(function() {
      headers2.push($(this).text().toLowerCase());
    });

  // Turn all existing rows into a loopable array
  $rows2.each(function() {
    var $td2 = $(this).find("td");
    var h2 = {};

    // Use the headers from earlier to name our hash keys
    headers2.forEach(function(header2, i2) {
      h2[header2] = $td2.eq(i2).text();
    });

    data2.push(h2);
  });

  // Output the result
  $EXPORT2.text(JSON.stringify(data2));
});
<!DOCTYPE html>
<html>

<head>
  <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">

  <base target="_top">

</head>

<body class="container">

  <div class="card-panel">
    <h4 class="center">Client Info</h4>

    <ul class="collapsible" data-collapsible="expandable">

      <!--                           Dependants                               -->

      <li>
        <div class="collapsible-header">
          <i class="material-icons">filter_drama</i>Dependants</div>
        <div class="collapsible-body">
          <div class="card">
            <h3 class="table-header">Dependants
              <span class="table-add"><button class="waves-effect waves-light btn-small">Add</button></span>
              <span class="table-remove"><button class="waves-effect waves-light btn-small">Remove</button></span>
            </h3>
            <div class="card-body">
              <div id="tableDependants" class="table-editable">
                <table class="table table-bordered table-responsive-md table-striped text-center">
                  <thead>
                    <tr>
                      <th class="table-header">Surname</th>
                      <th class="table-header">First Name</th>
                      <th class="table-header">Initials</th>
                      <th class="table-header">Date of Birth</th>
                      <th class="table-header">Gender (M/F)</th>
                      <th class="table-header">Relationship</th>
                    </tr>
                  </thead>
                  <tr>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                  </tr>
                  <!-- This is our clonable table line -->
                  <tr class="hide">
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                    <td class="center" contenteditable="true"></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </li>

      <!--                          Children’s Education Cover – Current Provision (E)                               -->

      <li>
        <div class="collapsible-header">
          <i class="material-icons">filter_drama</i>Children’s Education Cover – Current Provision (E)</div>
        <div class="collapsible-body">

          <div class="row">

            <div class="input-field col s5">
              <input id="mi" type="text" class="validate">
              <label for="mi">Monthly Investment</label>
            </div>
            <div class="input-field col s5">
              <input id="ca" type="text" class="validate">
              <label for="ca">Capital Available</label>
            </div>
          </div>
          <!--Close Row-->

          <div class="card">

            <div class="card-body">
              <div id="tableIncome" class="table-editable">
                <table class="table table-bordered table-responsive-md table-striped text-center">
                  <h5 class="table-header">Gross Monthly Income</h5>
                  <thead>
                    <tr>
                      <th class="table-header">Income Type</th>
                      <th class="table-header">Amount</th>
                      <th class="table-header">Death</th>
                      <th class="table-header">Disability</th>
                      <th class="table-header">Retirement</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="center">Salary</td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                    </tr>
                    <tr>
                      <td class="center">Commission</td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                    </tr>
                    <tr>
                      <td class="center">Dividends</td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                    </tr>
                    <tr>
                      <td class="center">Interest</td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                    </tr>
                    <tr>
                      <td class="center">Rent</td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                    </tr>
                    <tr>
                      <td class="center">Pension</td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                    </tr>
                    <tr>
                      <td class="center">Car/Travel Allowance</td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                    </tr>
                    <tr>
                      <td class="center">Total Monthly Income</td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                      <td class="center" contenteditable="true"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

        </div>
      </li>

    </ul>
    <!--                            Submit                                -->

    <div class="row">
      <button id="export-btn" class="waves-effect waves-light btn #4dd0e1 cyan lighten-2"><i class="material-icons left">exit_to_app</i>Subbmit</button>
      <p id="export"></p>
    </div>
    <!--Close Row-->
  </div>

  <!--Close Container-->

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...