javascript - jQuery - 在父行下方填充子表
问题描述
单击“唯一 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();
});
});
我至少在点击功能起作用的地方恢复了它。谢谢
解决方案
你走在正确的轨道上;您需要找到单击项目的索引。
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]:
根据您留下的评论,您希望您object array
可以编辑。此编辑对它进行了小修改,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>
推荐阅读
- r - ReadItem:未知类型 64,可能由更高版本的 R 编写
- django - 是什么导致 SMTPAuthenticationError
- fusionauth - 向 krakend 提供 JWT 普通令牌以进行签名
- android - 将 Alpha 页面转换器应用于 ViewPager
- javascript - 向 JSON 文件 URL 发出 GET 请求并存储响应,以便它可以在 Vue.js 应用程序启动时全局使用?
- python-3.x - 消息:尝试在未建立连接的情况下运行命令
- scala - size 和 sizeIs 的区别
- android - 资源 android:attr/dialogCornerRadius
- reactjs - 如何使用 react-router-dom 有条件地渲染路由?
- php - 当用户从 Oracle 在 PHP 应用程序中输入重复的主键时引发应用程序错误