我是 JavaScript 新手在此代码中，我尝试companyDetails(nested object of productDetails)按其 id 添加表。就像，对于id1，我想在id输入 id 1 的输入字段中添加 companyDetails 并在给定的输入字段中插入详细信息，所以我的问题是companyDetails(date,address,companyName)在为输入的 id 添加其值后不会显示在表中<!DOCTYPE html><html><head> <script src="add.js"></script> <style> th, td, p, input { font-family: Arial, Helvetica, sans-serif; } table, th, td { border: solid 1px #DDD; border-collapse: collapse; padding: 10px 10px; text-align: center; } th { font-weight: bold; } </style></head><body onload="display()"> <h2>Product Details:</h2> <form action=""> <label for="id">Id: </label> <input type="number" id="productId" required> <input type="button" value="autofill" onclick="auto()"><br><br> <label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br> <label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30" rows="10"></textarea><br><br> <label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br> <input type="button" value="add company details" onclick="addCompanyDetails()"><br><br> <p id="result"></p> <p id="demo"></p> <p id="messageTableA"></p> </form></body></html>
3 回答
梵蒂冈之花
TA贡献1900条经验 获得超5个赞
在这里，我将具有特定 ID 的公司信息添加到其各自的产品 id 中，例如productDetails[i].address = Caddress;在 addCompanyDetails()功能中，然后在我已替换的显示功能中companyDetails.address to data[i].address。 但请确保当您重新加载页面时它会丢失数据。
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
/** * function to add company details */
function addCompanyDetails() {
let data = (document.getElementById('productId').value);
let date1 = document.getElementById('date').value;
let Caddress = document.getElementById('address').value;
let Cname = (document.getElementById('companyName').value);
if (data === '') {
message("enter id for search");
}
for (let i = 0; i < productDetails.length; i++) {
let companyDetails = productDetails[i].companyDetails ? productDetails[i].companyDetails : { date: "", address: "", companyName: "" };
let p = companyDetails;
if ((productDetails[i].id) == (data)) {
p.companyName = Cname ;
productDetails[i].date = date1 ;
productDetails[i].address = Caddress;
productDetails[i].companyName=Cname;
}
displayData();
clearInputData();
}
}
/** * this function display the data in table */
function displayData(companyDetails) {
objectArray = Object.values(productDetails);
display(objectArray, companyDetails,clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
let id = document.getElementById('productId').value;
let date = document.getElementById('date').value;
let address = document.getElementById('address').value;
let companyName = document.getElementById('companyName').value;
return { id, date, address, companyName };
}
/** * Function is to display the data in table */
function display(productStore,callBack) {
messageTable(" ");
let data = productDetails;
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
for (let i = 0; i < data.length; i++) {
if (data[i].productWeight === undefined) {
data[i].productWeight = " ";
} else { }
if (data[i].companyName === undefined) {
data[i].companyName = " ";
} else { }
if (data[i].date === undefined) {
data[i].date = " ";
} else { }
if (data[i].address === undefined) {
data[i].address = " ";
} else { }
table += "<tr><td>" + data[i].id + "</td>";
table += "<td>" + data[i].partNo + "</td>";
table += "<td>" + data[i].productName + "</td>";
table += "<td>" + data[i].size + "</td>";
table += "<td>" + data[i].color + "</td>";
table += "<td>" + data[i].description + "</td>";
table += "<td>" + data[i].productWeight + "</td>";
table += "<td>" + data[i].date + "</td>";
table += "<td>" + data[i].address + "</td>";
table += "<td>" + data[i].companyName + "</td>";
}
messageTable(table);
clearInputData();
}
/** * function is to print the table */
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/** * this function is to clear the data */
function clearInputData() {
document.getElementById("productId").value = "";
document.getElementById("address").value = "";
document.getElementById("date").value = "";
document.getElementById("companyName").value = "";
}
<!DOCTYPE html>
<html>
<head>
<script src="home.js"></script>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="display()">
<h2>Product Details:</h2>
<form action="">
<label for="id">Id: </label> <input type="number" id="productId" required> <input type="button"
value="autofill" onclick="auto()"><br><br>
<label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br>
<label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30"
rows="10"></textarea><br><br>
<label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br>
<input type="button" value="add company details" onclick="addCompanyDetails()"><br><br>
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html>
幕布斯6054654
TA贡献1876条经验 获得超7个赞
getObjById接受一个对象数组和您要查找的 id，并返回给定数组中具有您请求的 id 的对象
//if the id requested does not exist in the array you gave, it returns undefined
function getObjById(arr,id){return arr.filter(a=>a.id==id)[0]}
//example usage(valid/existing id)
console.log(getObjById(productDetails,"1"))
//example usage(invalid/non-existing id)
console.log(getObjById(productDetails,"99"))
//because I have == and not === 1=="1"
console.log(getObjById(productDetails,1))
<script>
//just where I have the array to save line space for the function
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
</script>
MMMHUHU
TA贡献1834条经验 获得超8个赞
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
/** * function to add company details */
function addCompanyDetails() {
let data = (document.getElementById('productId').value);
let Name = (document.getElementById('companyName').value);
let Cdate = (document.getElementById('date').value);
let Caddress = (document.getElementById('address').value);
if (data === '') {
message("enter id for search");
}
for (let i = 0; i < productDetails.length; i++) {
if ((productDetails[i].id) == (data)) {
productDetails[i].companyDetails = {
date: "",
companyName: "",
address: ""
}
productDetails[i].companyDetails.companyName = Name;
productDetails[i].companyDetails.date = Cdate;
productDetails[i].companyDetails.address = Caddress;
console.log(productDetails[i].companyDetails.companyName);
}
displayData();
clearInputData();
}
}
/** * this function display the data in table */
function displayData() {
objectArray = Object.values(productDetails);
display(objectArray, clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
let id = document.getElementById('productId').value;
let date = document.getElementById('date').value;
let address = document.getElementById('address').value;
let companyName = document.getElementById('companyName').value;
return { id, date, address, companyName };
}
/** * Function is to display the data in table */
function display(productStore, callBack) {
messageTable(" ");
let data = productDetails;
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
for (let i = 0; i < data.length; i++) {
if (data[i].productWeight === undefined) {
data[i].productWeight = " ";
} else { }
if (data[i].date === undefined) {
data[i].date = " ";
} else { }
if (data[i].address === undefined) {
data[i].address = " ";
} else { }
let companyDetails = data[i].companyDetails ? data[i].companyDetails : { date: "", address: "", companyName: "" };
table += "<tr><td>" + data[i].id + "</td>";
table += "<td>" + data[i].partNo + "</td>";
table += "<td>" + data[i].productName + "</td>";
table += "<td>" + data[i].size + "</td>";
table += "<td>" + data[i].color + "</td>";
table += "<td>" + data[i].description + "</td>";
table += "<td>" + data[i].productWeight + "</td>";
table += "<td>" + companyDetails.date + "</td>";
table += "<td>" + companyDetails.address + "</td>";
table += "<td>" + companyDetails.companyName + "</td>";
}
messageTable(table);
clearInputData();
}
/** * function is to print the table */
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/** * this function is to clear the data */
function clearInputData() {
document.getElementById("productId").value = "";
document.getElementById("address").value = "";
document.getElementById("date").value = "";
document.getElementById("companyName").value = "";
}
<!DOCTYPE html>
<html>
<head>
<script src="add.js"></script>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="display()">
<h2>Product Details:</h2>
<form action="">
<label for="id">Id: </label> <input type="number" id="productId" required> <input type="button"
value="autofill" onclick="auto()"><br><br>
<label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br>
<label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30"
rows="10"></textarea><br><br>
<label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br>
<input type="button" value="add company details" onclick="addCompanyDetails()"><br><br>
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html>
现在它完全可以工作，无需删除嵌套对象
添加回答
举报
0/150
提交
取消