javascript - jQuery - 子行 td 位于 th 下方而不是左侧(对齐)

Question

我正在尝试创建一个单独的子表以直接显示在该行下方。我能够做到这一点；但是，我很难对齐该子表的标题和数据。我的表头和我的子表数据在同一行；我希望它们位于不同的行中，其中标题位于数据上方(td)。 例如:

Description Arrival
Heavy

有人可以指导我在附加子表标题时做错了什么吗？

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="parentTable">
  <thead>
    <tr class="category">
      <th>Unique ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Price</th>
      <th>Hours</th>
    </tr>
  </thead>

  <tbody id="parentTableBody">
  </tbody>
</table>

jQuery:

$(document).ready(function() {
  var arr1 = generateItem();
  if (arr1) {
    var arr2 = [].concat(arr1);
    var tr;
    $.each(arr2, function(i, e) {
      tr = $('<tr>');
      //TODO only add <a> tag if there is going to be a child row!
      tr.append("<td>" + "<a href='#'>" + (e.UniqueId || "") + "</a>" + "</td>");
      tr.append("<td>" + (e.Name || "") + "</td>");
      tr.append("<td>" + (e.Email || "") + "</td>");
      tr.append("<td>" + (e.Price || "") + "</td>");
      tr.append("<td>" + (e.Hours || "") + "</td>");
      $('#parentTableBody').append(tr);

        tr = $('<tr class="child-row">');
                 tr.append("<th>" + "Description" + "</th>");
             tr.append("<th>" + "Arrival" + "</th>");
             tr.append("<td>" + (e.Description || "") + "</td>");
             tr.append("<td>" + (e.Arrival || "") + "</td>");
             $('#parentTableBody').append(tr);  
             tr.hide();

    });

  }
});

function generateItem() {
  var item = [{
      UniqueId: "0",
      Name: "Alex",
      Email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e3eee7fac2e7efe3ebeeace1edef" rel="noreferrer noopener nofollow">[email protected]</a>",
      Price: "$20.00",
      Hours: "1",
      Description: "N/A",
      Arrival: "Noon"
    },
    {
      UniqueId: "1",
      Name: "Jay",
      Email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb919a82bb9e969a9297d5989496" rel="noreferrer noopener nofollow">[email protected]</a>",
      Price: "$12.00",
      Hours: "0.2",
      Description: "Small",
      Arrival: "test"
    },
    {
      UniqueId: "2",
      Name: "Dylan",
      Email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2145584d404f61444c40484d0f424e4c" rel="noreferrer noopener nofollow">[email protected]</a>",
      Price: "$32.00",
      Hours: "2.2",
      Description: "Heavy"
    }
  ];

  return item;
}

$(function() {
  $('#parentTable tbody a').on("click", function(event) {
      $baseRow = $(event.target).closest("tr");
      next = $baseRow.next("tr");
      if (next.is(".child-row")){
        next.toggle();
      }

  });
});

jsFiddle Demo

Answer 1

您可以构建内部表而不是内部行。

$(document).ready(function() {
  var arr1 = generateItem();
  if (arr1) {
    var arr2 = [].concat(arr1);
    var tr;
    $.each(arr2, function(i, e) {
      tr = $('<tr>');
      //TODO only add <a> tag if there is going to be a child row!
      tr.append("<td>" + "<a href='#'>" + (e.UniqueId || "") + "</a>" + "</td>");
      tr.append("<td>" + (e.Name || "") + "</td>");
      tr.append("<td>" + (e.Email || "") + "</td>");
      tr.append("<td>" + (e.Price || "") + "</td>");
      tr.append("<td>" + (e.Hours || "") + "</td>");
      $('#parentTableBody').append(tr);
      
      //TODO Subtable headers and data
        //subtable tr header
        subTable = $('<table class="child-table">');
        trHeader = $('<tr class="child-row">');
        trHeader.append("<th>" + "Description" + "</th>");
        trHeader.append("<th>" + "Arrival" + "</th>");
        subTable.append(trHeader);
        //subtable tr data
        tr = $('<tr class="child-row">');
        tr.append("<td>" + (e.Description || "") + "</td>");
        tr.append("<td>" + (e.Arrival || "") + "</td>");
        subTable.append(tr); 
        $('#parentTableBody').append(subTable); 
        
        subTable.hide();
               
    });

  }
});

function generateItem() {
  var item = [{
      UniqueId: "0",
      Name: "Alex",
      Email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1978757c61597c74787075377a7674" rel="noreferrer noopener nofollow">[email protected]</a>",
      Price: "$20.00",
      Hours: "1",
      Description: "N/A",
      Arrival: "Noon"
    },
    {
      UniqueId: "1",
      Name: "Jay",
      Email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8de7ecf4cde8e0ece4e1a3eee2e0" rel="noreferrer noopener nofollow">[email protected]</a>",
      Price: "$12.00",
      Hours: "0.2",
      Description: "Small",
      Arrival: "test"
    },
    {
      UniqueId: "2",
      Name: "Dylan",
      Email: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e7faefe2edc3e6eee2eaefade0ecee" rel="noreferrer noopener nofollow">[email protected]</a>",
      Price: "$32.00",
      Hours: "2.2",
      Description: "Heavy"
    }
  ];

  return item;
}

$(function() {
  $('#parentTable tbody a').on("click", function(event) {
      $baseRow = $(event.target).closest("tr");
      next = $baseRow.next("table");
      if (next.is(".child-table")){
        next.toggle();
      }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="parentTable">
  <thead>
    <tr class="category">
      <th>Unique ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Price</th>
      <th>Hours</th>
    </tr>
  </thead>

  <tbody id="parentTableBody">
  </tbody>
</table>