Блог

Главная - Вопросы по программированию - Javascript — Json из таблицы с «родительскими» и «дочерними» строками

Javascript — Json из таблицы с «родительскими» и «дочерними» строками

#javascript #html #jquery #json #html-table

Вопрос:

Мне нужно получить значения (с помощью выбора флажка) из нескольких строк таблицы для создания json. У меня есть строки, которые считаются дочерними, принадлежащими родительской строке (класс=основной цвет). Родительская строка всегда будет вставлена в json, и к ней будут добавлены выбранные дочерние строки. Формат json должен выглядеть следующим образом:

 parentRow{

 name: string,
 surname: string,
 work: string,
 country: int,
 birthday: string,
 hobbyes: string
 ChildRows[
    ChildRow{
     childname: string,
     childage: int
    }, 
   ChildRow{
    childname: string,
    childage: int
   }  
 ]
};

Кроме того, родительская строка может содержать бесконечное количество дочерних строк, поэтому мне понадобится что-то, что динамически вставляет объекты «ChildRow» внутри json.

публикация html, который я использую:

 $(function () {
  $(".docRow").on("click", function () {
    var parentRow = [];
    $("table > tbody > tr").each(function () {
      var $tr = $(this);
      var $trh = $('tr.table-primary').first();
      if ($tr.find(".docRow").is(":checked")) {
        parentRow.push({
          name: $trh.find(".name").text(),
          surname: $trh.find(".surname").text(),
          work: $trh.find(".work").text(),
          country: $trh.find(".country").text(),
          birthday: $trh.find(".birthday").text(),
          hobbyes: $trh.find(".hobbyes").text(),
          childRows: [{
            childRow: {
              childname: $tr.find(".childname").text(),
              childage: $tr.find(".childage").text(),
            }}
          ]

        })
        ;
      }
    });
    console.clear();
    console.log(JSON.stringify(parentRow));
  });
}); 
 <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <title>Hello, world!</title>
</head>

<body>
  <div class="container">
    <table class="table table-sm">
      <thead>
        <tr>
          <th scope="col" style="max-width: 36px;"></th>
          <th scope="col">Name</th>
          <th scope="col">Surname</th>
          <th scope="col">Work</th>
          <th scope="col">Country</th>
          <th scope="col">Birthday</th>
          <th scope="col">Hobbyes</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-primary">
          <td><input class="form-check-input docRow" type="checkbox"></td>
          <td class="name">Mark</td>
          <td class="surname">White</td>
          <td class="work">Lawyer</td>
          <td class="country">USA</td>
          <td class="birthday">26/05/1993</td>
          <td class="hobbyes">Tennis, Music</td>
        </tr>
        <tr>
          <td><input class="form-check-input doceRow" type="checkbox"></td>
          <td class="childname">Laura</td>
          <td class="childage">5</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td><input class="form-check-input docRow" type="checkbox"></td>
          <td class="childname">Maurice</td>
          <td class="childage">10</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td><input class="form-check-input docRow" type="checkbox"></td>
          <td class="childname">Bryan</td>
          <td class="childage">2</td>
          <td colspan="4"></td>
        </tr>
        <tr class="table-primary">
          <td><input class="form-check-input docRow" type="checkbox"></td>
          <td class="name">Patricia</td>
          <td class="surname">Mallon</td>
          <td class="work">Manager</td>
          <td class="country">Germany</td>
          <td class="birthday">05/07/1976</td>
          <td class="hobbyes">Mode, Cooking, Reading</td>
        </tr>
        <tr>
          <td><input class="form-check-input fileRow" type="checkbox"></td>
          <td class="childname">David</td>
          <td class="childage">8</td>
          <td colspan="4"></td>
        </tr>        
        <tr class="table-primary">
          <td><input class="form-check-input docRow" type="checkbox"></td>
          <td class="name">Wuei</td>
          <td class="surname">Zong</td>
          <td class="work">Marketing</td>
          <td class="country">China</td>
          <td class="birthday">01/01/1945</td>
          <td class="hobbyes">Bricolage, Manual Work, Sleep</td>
        </tr>
        <tr>
          <tr>
            <td><input class="form-check-input fileRow" type="checkbox"></td>
            <td class="childname">Philips</td>
            <td class="childage">12</td>
            <td colspan="4"></td>
          </tr>
          <tr>
            <td><input class="form-check-input fileRow" type="checkbox"></td>
            <td class="childname">Alice</td>
            <td class="childage">22</td>
            <td colspan="4"></td>
          </tr> 
        </tr>
      </tbody>
    </table>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds 3Ulb9Bn9Plx0x4"
    crossorigin="anonymous"></script>

</body>

</html>

Комментарии:

1. Вы пробовали ответить ниже ?

2. @Swati, я думаю, я буду использовать что-то похожее на ваш ответ, спасибо!

Ответ №1:

Вы можете выполнять цикл только по table-primary строкам . Затем внутри этого используйте nextUntil() , чтобы получить все trs до следующих table-primary строк, и проверьте, установлен ли флажок внутри tr или нет, в зависимости от того, будет ли ваш json помещен в массив и передан в parentRow него .

Демонстрационный код :

 $(function() {
  $(".docRow").on("click", function() {
    var parentRow = [];
    console.clear()
    //loop through only tr.primary row..
    $("table > tbody > tr.table-primary").each(function() {
      var $tr = $(this);
      var child_row = [] //for child..json array
      //loop through trs ..until next promary row
      $(this).nextUntil('.table-primary').each(function() {
        if ($(this).find("input:checkbox").is(":checked")) {
          //push values...
          child_row.push({
            childname: $(this).find(".childname").text(),
            childage: parseInt($(this).find(".childage").text()),
          })
        }
      })
      if ($tr.find(".docRow").is(":checked")) {
        //change to tr = current row..
        parentRow.push({
          name: $tr.find(".name").text(),
          surname: $tr.find(".surname").text(),
          work: $tr.find(".work").text(),
          country: $tr.find(".country").text(),
          birthday: $tr.find(".birthday").text(),
          hobbyes: $tr.find(".hobbyes").text(),
          childRows: child_row //pass here

        });
      }
    });

    console.log(JSON.stringify(parentRow));

  });
}); 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="container">
  <table class="table table-sm">
    <thead>
      <tr>
        <th scope="col" style="max-width: 36px;"></th>
        <th scope="col">Name</th>
        <th scope="col">Surname</th>
        <th scope="col">Work</th>
        <th scope="col">Country</th>
        <th scope="col">Birthday</th>
        <th scope="col">Hobbyes</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-primary">
        <td><input class="form-check-input docRow" type="checkbox"></td>
        <td class="name">Mark</td>
        <td class="surname">White</td>
        <td class="work">Lawyer</td>
        <td class="country">USA</td>
        <td class="birthday">26/05/1993</td>
        <td class="hobbyes">Tennis, Music</td>
      </tr>
      <tr>
        <td><input class="form-check-input docRow" type="checkbox"></td>
        <td class="childname">Laura</td>
        <td class="childage">5</td>
        <td colspan="4"></td>
      </tr>
      <tr>
        <td><input class="form-check-input docRow" type="checkbox"></td>
        <td class="childname">Maurice</td>
        <td class="childage">10</td>
        <td colspan="4"></td>
      </tr>
      <tr>
        <td><input class="form-check-input docRow" type="checkbox"></td>
        <td class="childname">Bryan</td>
        <td class="childage">2</td>
        <td colspan="4"></td>
      </tr>
      <tr class="table-primary">
        <td><input class="form-check-input docRow" type="checkbox"></td>
        <td class="name">Patricia</td>
        <td class="surname">Mallon</td>
        <td class="work">Manager</td>
        <td class="country">Germany</td>
        <td class="birthday">05/07/1976</td>
        <td class="hobbyes">Mode, Cooking, Reading</td>
      </tr>
      <tr>
        <td><input class="form-check-input docRow" type="checkbox"></td>
        <td class="childname">David</td>
        <td class="childage">8</td>
        <td colspan="4"></td>
      </tr>
      <tr class="table-primary">
        <td><input class="form-check-input docRow" type="checkbox"></td>
        <td class="name">Wuei</td>
        <td class="surname">Zong</td>
        <td class="work">Marketing</td>
        <td class="country">China</td>
        <td class="birthday">01/01/1945</td>
        <td class="hobbyes">Bricolage, Manual Work, Sleep</td>
      </tr>
      <tr>
        <tr>
          <td><input class="form-check-input docRow" type="checkbox"></td>
          <td class="childname">Philips</td>
          <td class="childage">12</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td><input class="form-check-input docRow" type="checkbox"></td>
          <td class="childname">Alice</td>
          <td class="childage">22</td>
          <td colspan="4"></td>
        </tr>

    </tbody>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds 3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
Метки: