用javaScript查找一个值在表中被选中的次数

Question

不好意思，我是web开发和javaScript新手。我有json文件包含有关书籍的信息。我有一个功能来显示所有的书在一个表中，用户可以选择。我想要的是，如果用户从表中选择了多本书，它会显示每个类别中他们选择了多少本书，例如"您选择了2本儿童文学书籍和1本计算机书籍">

我很不确定我该怎么做。如有任何帮助，我将不胜感激。

[
{
"ID": "1",
"Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"ID": "2",
"Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"ID": "3",
"Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
},
{
"ID": "4",
"Name": "Harry Potter",
"Category": "Children's literature",
"Price": "210.40"
},
{
"ID": "3",
"Name": "Popular Science",
"Category": "Children's literature",
"Price": "210.40"
}

)

my table function:

function loadAllBooks() {
$.getJSON('books.json', function (jsonData) {
jsonArray = jsonData;
var data = jsonArray;
$(".allBookTable").html('<thead><th>ID</th><th>Name</th><th>Category</th><th>Price</th></thead><tbody class="filterAllTableBody"></tbody>');
var containers = document.getElementsByClassName("filterAllTableBody");
for (var i = 0; i < containers.length; i++) {
for (var j = 0; j < data.length; j++) {
var allTableRow = document.createElement("tr");
var dataId = "allBooks" + j;
allTableRow.setAttribute("data-id", dataId);
allTableRow.className = "allBooks";
allTableRow.innerHTML = '<td>' + (j + 1) + '</td> <td>' + data[j].Name + '</td> <td data-id="' + dataId + '">' + data[j].Category + '</td> <td>' + data[j].Price + '</td>';
containers[i].appendChild(allTableRow);
}
}

});
}

Answer 1

在带有data-category属性的标签中换行内容。使用for=属性将标签与复选框关联起来。任何单击都会选中/取消选中(隐藏?)复选框，但您可以根据自己的选择设置样式。添加eventListener来生成标签，并在点击或更改时重新记录状态。