jQuery - 在父行下面填充子表

时间：2018-05-18 15:00:30

标签： javascript jquery html

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

我知道我需要一个循环或者需要通过子表索引的东西（比如subTableData [i] .Description），但是我的click函数会中断..

有人可以指导我吗？

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

1 个答案:

答案 0 :(得分：1)

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

QuerySet

我还对var targetIdx = subTableData.findIndex(x => x.UniqueId == idName); 结构进行了更改以修复它，并确保页面上没有多个subTable，并对附加进行了一些小的更改技术

＆＃13;
＆＃13; 
id
＆＃13; 
$(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();

  });
});
＆＃13;
＆＃13;
＆＃13;

编辑[0]：​​ 根据您留下的评论，您希望<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>可以编辑。此编辑对object array进行了少量修改，并允许对其进行修改，并保留这些更改。

＆＃13;
＆＃13; 
generateItem
＆＃13; 
$(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();

  });
});
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题