Javascript - 来自具有“父”和“子”行的表中的 Json

Posted

技术标签:

【中文标题】Javascript - 来自具有“父”和“子”行的表中的 Json【英文标题】：Javascript - Json from table with "parent" and "childrens" rows 【发布时间】：2021-08-31 02:50:08 【问题描述】：

我需要从表的多行中获取值（通过复选框选择）来构建 json。我有被认为属于父行的子行（class= 原色）。父行将始终插入到 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
     
 ]
;

父行也可以包含无限的子行，所以我需要在 json 中动态插入“ChildRow”对象的东西。

发布我正在使用的 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>

【问题讨论】：

你试过下面的答案吗？ @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>

【讨论】：

以上是关于Javascript - 来自具有“父”和“子”行的表中的 Json的主要内容，如果未能解决你的问题，请参考以下文章

ExtJS/Javascript：将子模型添加到父模型，在网格上呈现

javascript：仅当父元素处于活动状态且子元素具有特定类时，如何向子元素添加属性？

C#合并来自父级对象列表的子对象列表

根据父 ID JavaScript 将对象设为子对象 [重复]

Django：具有多个子模型类型的父模型

JavaScript：将具有父键的对象数组转换为父/子树（包括没有父的对象）