javascript – 尝试制作HTML表并使用相同的JSON数据填充select标记
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 尝试制作HTML表并使用相同的JSON数据填充select标记，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8781字，纯文字阅读大概需要13分钟。
内容图文
我有一个JSON数据,我正在尝试创建一个HTML表格以及一个下拉列表但面临渲染表和下拉列表的问题.
我的JSON：
[
{
"Category name": "juce",
"Category Data": [
{
"Item Code": "1234",
"Item Name": "juce1",
"Quantity": "0"
}
]
},
{
"Category name": "juce",
"Category Data": [
{
"Item Code": "1234",
"Item Name": "juce2",
"Quantity": "0"
}
]
},
{
"Category name": "rice",
"Category Data": [
{
"Item Code": "1234",
"Item Name": "rice1",
"Quantity": "0"
}
]
},
{
"Category name": "rice",
"Category Data": [
{
"Item Code": "1234",
"Item Name": "juce2",
"Quantity": "0"
}
]
},
{
"Category name": "roti",
"Category Data": [
{
"Item Code": "1234",
"Item Name": "roti1",
"Quantity": "0"
}
]
},
{
"Category name": "roti",
"Category Data": [
{
"Item Code": "1234",
"Item Name": "juce2",
"Quantity": "0"
}
]
}
]
我正在尝试制作一个HTML表格,在其外面有一个下拉列表,名为Category Name.
就像在我的JSON中一样,我在下拉列表中有我想要的类别名称,以及我的HTML表格中的其他数据.
当用户单击下拉列表中的任何类别时,HTML表格仅根据该类别名称进行填充.
“数量”此字段是可编辑的,将由用户输入
我正在尝试的片段：
function addTable(tableData) {
var col = Object.keys(tableData[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
var colNum = col.length; //to improve the speed
for (var i = 0; i < colNum + 1; i++) {
var th = document.createElement("th"); // TABLE HEADER.
if (i >= colNum) {
th.innerHTML = "Quantity";
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
} else {
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
}
for (var i = 0; i < tableData.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length + 1; j++) {
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input");
hiddenField.style.display = "none";
var tabledata = tableData[i][col[j]];
if (i > -1 && j >= colNum) {
var quantityField = document.createElement("input");
quantityField.style.border = "none";
quantityField.style["text-align"] = "center";
quantityField.setAttribute('name', 'Quantity');
quantityField.setAttribute('autocomplete', 'on');
quantityField.setAttribute('value', '0');
quantityField.setAttribute('type', 'number');
quantityField.setAttribute('required', 'required');
quantityField.classList.add("dataReset");
tabCell.appendChild(quantityField);
} else {
if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Code');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Name');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (j > 1)
tabCell.classList.add("text-right");
}
}
}
var divContainer = document.getElementById("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTable(tableData);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="www.google.com" id="form1">
<div class="row position-relative">
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option> <!-- this also i want to populate with the JSON DATA not statically,except All -->
<option>juce</option>
<option>rice</option>
<option>roti</option>
</select>
</div>
</div>
<hr style="border: 1px solid black">
<div class="table-responsive">
<table class="w-100" id=HourlysalesSummary></table>
</div>
<div>
<button type="submit" id="save">
<i class="fas fa-save"></i> Save
</button>
</div>
</form>但我没有得到结果.
我只有一个JSON,我想做的每件事都填充下拉列表并在用户选择“类别”填充表时进行过滤.
解决方法:
对于这个项目,分解步骤可能会更好.我看到几个步骤：
>从数据键创建表头
>从数据创建表正文
>从类别名称更新过滤器选项(唯一)
请考虑以下代码.
var tData = [{
"Category name": "juce",
"Category Data": [{
"Item Code": "1234",
"Item Name": "juce1",
"Quantity": "0"
}]
},
{
"Category name": "juce",
"Category Data": [{
"Item Code": "1234",
"Item Name": "juce2",
"Quantity": "0"
}]
},
{
"Category name": "rice",
"Category Data": [{
"Item Code": "1234",
"Item Name": "rice1",
"Quantity": "0"
}]
},
{
"Category name": "rice",
"Category Data": [{
"Item Code": "1234",
"Item Name": "juce2",
"Quantity": "0"
}]
},
{
"Category name": "roti",
"Category Data": [{
"Item Code": "1234",
"Item Name": "roti1",
"Quantity": "0"
}]
},
{
"Category name": "roti",
"Category Data": [{
"Item Code": "1234",
"Item Name": "juce2",
"Quantity": "0"
}]
}
];
$(function() {
function getCatNames(arr) {
var names = [];
$.each(arr, function(key, obj) {
names.push(obj['Category name']);
});
var unique = names.filter((v, i, a) => a.indexOf(v) === i);
return unique;
}
function updateFilter(obj, d) {
var catOpts = getCatNames(d);
obj.html("");
obj.append("<option>All</option>");
$.each(catOpts, function(k, v) {
$("<option>").html(v).appendTo(obj);
});
}
function filterSelection(obj) {
var s = $("#CategoryName option:selected").val();
if (s == "All") {
$("tbody tr", obj).show();
return;
}
$("tbody tr", obj).each(function(ind, el) {
var cat = $("td:eq(0)", el).text().trim();
if (cat != s) {
$(el).hide();
} else {
$(el).show();
}
});
}
function makeTableHead(obj, data) {
if (obj.find("thead").length === 0) {
$("<thead>").prependTo(obj);
}
var row = $("<tr>").appendTo($("thead", obj));
$.each(data[0], function(k, v) {
console.log(k, v);
if (k == "Category name") {
$("<th>", {
class: "text-center head"
}).html(k).appendTo(row);
} else {
$.each(v[0], function(j, x) {
$("<th>", {
class: "text-center head"
}).html(j).appendTo(row);
});
}
});
}
function makeTableBody(obj, data, qnty) {
if (qnty == undefined) {
qnty = true;
}
if (obj.find("tbody").length === 0) {
$("<tbody>").appendTo(obj);
}
$.each(data, function(k, v) {
var row = $("<tr>", {
class: "item-" + k
}).appendTo($("tbody", obj));
var n = $("<td>", {
class: "text-center cat-name"
}).html(v['Category name']).appendTo(row);
$("<input>", {
type: "hidden",
name: "cat-name[]",
value: v['Category name']
}).appendTo(n);
var itc = $("<td>", {
class: "text-center item-code"
}).appendTo(row);
itc.html(v['Category Data'][0]['Item Code']);
$("<input>", {
type: "hidden",
name: "item_code",
value: v['Category Data'][0]['Item Code']
}).appendTo(itc);
var itn = $("<td>", {
class: "text-center item-name"
}).appendTo(row);
itn.html(v['Category Data'][0]['Item Name']);
$("<input>", {
type: "hidden",
name: "item_name",
value: v['Category Data'][0]['Item Name']
}).appendTo(itn);
if (qnty) {
var q = $("<td>", {
class: "cat-qnty"
}).appendTo(row);
$("<input>", {
name: "Quantity",
autocomplete: "on",
value: v['Category Data'][0].Quantity,
type: "number",
class: "dataReset"
}).css({
border: "none",
"text-align": "center",
width: "4em"
}).appendTo(q);
}
});
}
function addTable(tableData, tbl) {
if (tbl == undefined) {
tbl = $("<table>", {
id: "HourlysalesSummary"
});
}
//var col = Object.keys(tableData[0]);
//var countNum = col.length;
makeTableHead(tbl, tableData);
makeTableBody(tbl, tableData);
var divContainer = $("#HourlysalesSummary").parent();
divContainer.html(tbl);
tbl.addClass("table table-striped table-bordered table-hover");
}
updateFilter($("#CategoryName"), tData);
addTable(tData, $("#HourlysalesSummary"));
$("#CategoryName").change(function() {
filterSelection($("#HourlysalesSummary"));
});
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="www.google.com" id="form1">
<div class="row position-relative">
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option>
<option>juce</option>
<option>rice</option>
<option>roti</option>
</select>
</div>
</div>
<hr style="border: 1px solid black">
<div class="table-responsive">
<table class="w-100" id="HourlysalesSummary">
<thead></thead>
<tbody></tbody>
</table>
</div>
<div>
<button type="submit" id="save"><i class="fas fa-save"></i> Save</button>
</div>
</form>如您所见,我创建了以下功能：
> addTable(数据)
> makeTableHead(对象,数据,数量)
> makeTableBody(对象,数据,数量)
> updateFilter(对象,数据)
> getCatNames(数据)
> filterSelection(object)
利用< thead>和< tbody>当你有更多动态表体内容时可以提供帮助.如果您进行更改或加载新数据,您可能只需要运行makeTableBody($(“#HourlysalesSummary”),tData);用新数据.
我把很多代码转换为jQuery.如果可能,我不喜欢混合.这也让我们使用$.each()更多,这对数组和对象数据非常有帮助.
希望这可以帮助.
内容总结
以上是互联网集市为您收集整理的javascript – 尝试制作HTML表并使用相同的JSON数据填充select标记全部内容，希望文章能够帮你解决javascript – 尝试制作HTML表并使用相同的JSON数据填充select标记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】