javascript - jQuery - 填充父行下方的子表

Question

当单击“唯一 ID”时，我尝试填充或显示子表行。然而，我得到的只是“未定义”。

我知道我需要一个循环或需要遍历子表索引的东西(如 subTableData[i].Description)，但随后我的点击功能中断了..

有人可以指导我吗？

HTML:

            <table id="parentTable">
    <thead>
        <tr>
            <th>Unique ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Price</th>
            <th>Hours</th>
        </tr>
    </thead>
    <tbody id="parentTableBody">
    </tbody>
</table>

<div id="subTableContainer" style="display: none;">
  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Arrival</th>
      </tr>
    </thead>
    <tbody id = subTableBody>
      <tr>

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

jQuery:

 $(document).ready(function(){ 
    var arr1 = generateItem();

if(arr1){
  var arr2 = [].concat(arr1); 
    var tr;
            $.each(arr2, function(i,e) {        
                tr = $('<tr>');
            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>');
             tr.append("<td>" + (e.Description || "") + "</td>");
             tr.append("<td>" + (e.Arrival || "") + "</td>");
             $('#subTableBody').append(tr);  */
            }); 
   }
   });  

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: "Morning"}, 
{UniqueId: "2" ,Name: "Dylan", Email: "dylan@email.com", Price: "$32.00", Hours: "2.2", Description: "Heavy", Arrival: "Night"}];

return item;
}

$(function(){      
      $('#parentTable tbody a').on("click", function(event) {
  var idName = $(event.target).text(),
    $baseRow = $(event.target).closest("tr");

  if ($baseRow.next("tr").find("table").length == 0) {
    var subTableData = generateItem(),

      subTableHTML = $("#subTableContainer table").clone(true),

      descriptionHTML = "<td>" + subTableData.Description + "</td>",
      arrivalHTML = "<td>" + subTableData.Arrival + "</td>";

    $baseRow.after("<tr><td colspan='4'></td></tr>");

    $baseRow.next("tr").find("td").append(subTableHTML);

    $baseRow.next("tr").find("#subTableBody tr").append(descriptionHTML).append(arrivalHTML);
  } else $baseRow.next("tr").remove();

});
});

我至少将其恢复到点击功能起作用的地方。谢谢

jsFiddle

Answer 1

你走在正确的道路上； 您需要找到单击的项目的索引。

var targetIdx = subTableData.findIndex(x => x.UniqueId == idName);

我还对 subTable 结构进行了更改以修复它并确保页面上没有多个 id，以及一些小更改到追加技术。

$(document).ready(function() {
  var arr1 = generateItem();

  if (arr1) {
    var arr2 = [].concat(arr1);
    var tr;
    $.each(arr2, function(i, e) {
      tr = $('<tr>');
      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>');
                   tr.append("<td>" + (e.Description || "") + "</td>");
                   tr.append("<td>" + (e.Arrival || "") + "</td>");
                   $('#subTableBody').append(tr);  */
    });
  }
});

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: "Morning"
    },
    {
      UniqueId: "2",
      Name: "Dylan",
      Email: "dylan@email.com",
      Price: "$32.00",
      Hours: "2.2",
      Description: "Heavy",
      Arrival: "Night"
    }
  ];

  return item;
}

$(function() {
  $('#parentTable tbody a').on("click", function(event) {
    var idName = $(event.target).text(),
      $baseRow = $(event.target).closest("tr");
    if ($baseRow.next("tr").find("table").length == 0) {
      var subTableData = generateItem();
      var targetIdx = subTableData.findIndex(x => x.UniqueId == idName);  //get the index

      var subTableHTML = $("#subTableContainer table").clone(true);
      var descriptionHTML = $("<td>").text(subTableData[targetIdx].Description); //modified to shorten
      var arrivalHTML = $("<td>").text(subTableData[targetIdx].Arrival);  //modified to shorten

      $baseRow.after("<tr><td colspan='4'></td></tr>");
      $baseRow.next("tr").find("td")
        .append(subTableHTML).find("tbody>tr")
          .append(descriptionHTML).append(arrivalHTML);
    } else $baseRow.next("tr").remove();

  });
});

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

<div id="subTableContainer" style="display: none;">
  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Arrival</th>
      </tr>
    </thead>
    <tbody>
      <tr>

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

编辑[0]:​​ 根据您留下的评论，您希望您的对象数组可编辑。此编辑对 generateItem 进行了小修改，并允许对其进行修改，并保留这些更改。

$(document).ready(function() {
  var arr1 = generateItem();

  if (arr1) {
    var arr2 = [].concat(arr1);
    var tr;
    $.each(arr2, function(i, e) {
      tr = $('<tr>');
      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>');
                   tr.append("<td>" + (e.Description || "") + "</td>");
                   tr.append("<td>" + (e.Arrival || "") + "</td>");
                   $('#subTableBody').append(tr);  */
    });
  }
});
var mydata = null;

function generateItem() {
  if (mydata == null) {
    mydata = [{
        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: "Morning"
      },
      {
        UniqueId: "2",
        Name: "Dylan",
        Email: "dylan@email.com",
        Price: "$32.00",
        Hours: "2.2",
        Description: "Heavy",
        Arrival: "Night"
      }
    ];
  }
  return mydata;
}

$(function() {
  $('#parentTable tbody a').on("click", function(event) {
    var idName = $(event.target).text(),
      $baseRow = $(event.target).closest("tr");
    if ($baseRow.next("tr").find("table").length == 0) {
      var subTableData = generateItem();
      var targetIdx = subTableData.findIndex(x => x.UniqueId == idName); //get the index

      var subTableHTML = $("#subTableContainer table").clone(true);
      var descriptionHTML = $("<td>").text(subTableData[targetIdx].Description); //modified to shorten
      var arrivalHTML = $("<td>").text(subTableData[targetIdx].Arrival); //modified to shorten

      $baseRow.after("<tr><td colspan='4'></td></tr>");
      $baseRow.next("tr").find("td")
        .append(subTableHTML).find("tbody>tr")
        .append(descriptionHTML).append(arrivalHTML);
    } else $baseRow.next("tr").remove();

  });
});

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

<div id="subTableContainer" style="display: none;">
  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Arrival</th>
      </tr>
    </thead>
    <tbody>
      <tr>

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