嵌套对象未使用 javascript 插入到表中
我是 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>
蝴蝶刀刀浏览 91回答 3
3回答
-
梵蒂冈之花
在这里，我将具有特定 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
getObjById接受一个对象数组和您要查找的 id，并返回给定数组中具有您请求的 id 的对象//if the id requested does not exist in the array you gave, it returns undefinedfunction 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 functionlet 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
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>现在它完全可以工作，无需删除嵌套对象
随时随地看视频慕课网APP
相关分类
JavaScript