Question

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

说明到达
重

当我附加子表标题时，有人可以指导我做错了吗？

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: "alex@email.com",
      Price: "$20.00",
      Hours: "1",
      Description: "N/A",
      Arrival: "Noon"
    },
    {
      UniqueId: "1",
      Name: "Jay",
      Email: "jay@email.com",
      Price: "$12.00",
      Hours: "0.2",
      Description: "Small",
      Arrival: "test"
    },
    {
      UniqueId: "2",
      Name: "Dylan",
      Email: "dylan@email.com",
      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: "alex@email.com",
      Price: "$20.00",
      Hours: "1",
      Description: "N/A",
      Arrival: "Noon"
    },
    {
      UniqueId: "1",
      Name: "Jay",
      Email: "jay@email.com",
      Price: "$12.00",
      Hours: "0.2",
      Description: "Small",
      Arrival: "test"
    },
    {
      UniqueId: "2",
      Name: "Dylan",
      Email: "dylan@email.com",
      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>

Answer 2

使用包含子表的子行的最佳方法，以保持html 5的有效性。

$(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
        containerRow = $('<tr class="child-row">');
        containerColumn = $('<td colspan="5">');
        subTable = $('<table class="child-table">');
        trHeader = $('<tr>');
        trHeader.append("<th>" + "Description" + "</th>");
        trHeader.append("<th>" + "Arrival" + "</th>");
        subTable.append(trHeader);
        //subtable tr data
        tr = $('<tr>');
        tr.append("<td>" + (e.Description || "") + "</td>");
        tr.append("<td>" + (e.Arrival || "") + "</td>");
        subTable.append(tr); 
        containerColumn.append(subTable);
        containerRow.append(containerColumn);
        $('#parentTableBody').append(containerRow); 
        
        containerRow.hide();
               
    });

  }
});

function generateItem() {
  var item = [{
      UniqueId: "0",
      Name: "Alex",
      Email: "alex@email.com",
      Price: "$20.00",
      Hours: "1",
      Description: "N/A",
      Arrival: "Noon"
    },
    {
      UniqueId: "1",
      Name: "Jay",
      Email: "jay@email.com",
      Price: "$12.00",
      Hours: "0.2",
      Description: "Small",
      Arrival: "test"
    },
    {
      UniqueId: "2",
      Name: "Dylan",
      Email: "dylan@email.com",
      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();
      }

  });
});

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

Answer 3

如果我确实理解你要做的是

$(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
      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: "alex@email.com",
      Price: "$20.00",
      Hours: "1",
      Description: "N/A",
      Arrival: "Noon"
    },
    {
      UniqueId: "1",
      Name: "Jay",
      Email: "jay@email.com",
      Price: "$12.00",
      Hours: "0.2",
      Description: "Small",
      Arrival: "test"
    },
    {
      UniqueId: "2",
      Name: "Dylan",
      Email: "dylan@email.com",
      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();
    }

  });
});

table th {
  text-align: left;
}

<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 - 子行td低于th而不是左边（对齐）

3 个答案: