Question

我有JSON数据，我试图以此数据填充HTML表。早些时候该表填充良好，但是根据我的要求，我更改了代码。

我在做什么

我有一个form，里面有一个选择选项（下拉列表）和我的桌子
在创建表格时，我要在每个项目行中添加一个带有类别名称的类
因此，当用户选择任何下拉选项时，我仅显示该类别的数据并隐藏其他类别，但是添加类时出现错误
错误是InvalidCharacterError: String contains an invalid character
我不知道我在做什么错

代码段

var tableData = [{
    "Item Code": "1978",
    "Item Name": "Alu Chat-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1979",
    "Item Name": "Dahi Alu Chat-S",
    "Selling Price": "50.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1980",
    "Item Name": "Samosa-S",
    "Selling Price": "25.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1981",
    "Item Name": "SamosaChat-S",
    "Selling Price": "40.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1982",
    "Item Name": "Dahi Samosa Chats-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1983",
    "Item Name": "Garam Samosa Chats-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1984",
    "Item Name": "Kachori Chats-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1985",
    "Item Name": "Garam Kachori Chat-S",
    "Selling Price": "50.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1986",
    "Item Name": "Dahi Kachori Chat-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1987",
    "Item Name": "Dai Raj Kachori-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1988",
    "Item Name": "Baby Kachori Chat-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1989",
    "Item Name": "Dahi Baby Kachori-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1990",
    "Item Name": "Anar Bhalla-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1991",
    "Item Name": "Dahi Bhalla-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1992",
    "Item Name": "Jhal Muri-S",
    "Selling Price": "60.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1993",
    "Item Name": "Chat Platter-S",
    "Selling Price": "110.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1994",
    "Item Name": "Dahi Papdi Chat-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "2402",
    "Item Name": "ALMOND CHBAR",
    "Selling Price": "26.2000",
    "Category Name": "GIFT PACK"
  },
  {
    "Item Code": "333",
    "Item Name": "A BR SB EX",
    "Selling Price": "1.0000",
    "Category Name": "EXEMPTED"
  }
]


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);
    tr.classList.add("item-row");
    for (var j = 0; j < col.length + 1; j++) {
      //here i am adding a class with the name of the category to each items row. 
      var categoryName = tableData[i]["Category Name"];
      tr.classList.add(categoryName);

      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 (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute('name', 'Selling_Price');
          hiddenField.setAttribute('value', tabledata);
          tabCell.appendChild(hiddenField);
        }
        if (tableData[i]['Category Name'] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute('name', 'Category_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);

$('#CategoryName').on('change', function() {
  var selectedOption = this.value;
  console.log(selectedOption);
  //getting all item rows so i can target them.
  var itemRows = document.getElementsByClassName("item-row");

  if (selectedOption === 'All') {
    //If "All" then style all rows with visibility: visible.
    for (var i = 0; i < itemRows.length; i++) {
      itemRows[i].style.visibility = "visible";
    }
  } else {
    //If the selectedOption is anything other than "All",
    // firstly i am style all rows with visibility: collapse
    for (var i = 0; i < itemRows.length; i++) {
      itemRows[i].style.visibility = "collapse";
    }
    // then getting all rows which have the selectedOption as a class and style those rows with visibility: visible.
    var selectedItemRows = document.getElementsByClassName(selectedOption);
    for (var i = 0; i < selectedItemRows.length; i++) {
      selectedItemRows[i].style.visibility = "visible";
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="divHide">
  <form action="InsertQuantityIndent" method="post" id="form1" autocomplete="on">
    <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>Chats</option>
          <option>GIFT PACK</option>
          <option>EXEMPTED</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>
      <button id="clear">
					<i class="fas fa-eraser"></i> Clear
				</button>
      <!-- <button id="print" type="button" onclick="printFunction()">
					<i class="fas fa-print"></i> Print
				</button> -->
    </div>
  </form>
</div>

我得到的错误是因为当类别名称作为礼品包出现时，它没有读取空格。
正在将错误显示为无效字符

Answer 1

这是您的错误：

// ...
"Category Name": "GIFT PACK"
// ...
var categoryName = tableData[i]["Category Name"];
tr.classList.add(categoryName)

您正在尝试将"GIFT PACK"添加为元素的类；但任何类名都不能包含空格。例如。当您编写<tr class="GIFT PACK">时，该元素将获得两个类：GIFT和PACK。当您使用CSS编写.GIFT PACK时，您正在寻找的元素<PACK>位于具有类GIFT的元素内。类名不能包含空格，并且JavaScript正在报告错误，因为您正在强迫它做一些不可能的事情。

编辑：每个评论。

var tableData = [{
    "Item Code": "1978",
    "Item Name": "Alu Chat-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1979",
    "Item Name": "Dahi Alu Chat-S",
    "Selling Price": "50.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1980",
    "Item Name": "Samosa-S",
    "Selling Price": "25.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1981",
    "Item Name": "SamosaChat-S",
    "Selling Price": "40.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1982",
    "Item Name": "Dahi Samosa Chats-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1983",
    "Item Name": "Garam Samosa Chats-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1984",
    "Item Name": "Kachori Chats-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1985",
    "Item Name": "Garam Kachori Chat-S",
    "Selling Price": "50.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1986",
    "Item Name": "Dahi Kachori Chat-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1987",
    "Item Name": "Dai Raj Kachori-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1988",
    "Item Name": "Baby Kachori Chat-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1989",
    "Item Name": "Dahi Baby Kachori-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1990",
    "Item Name": "Anar Bhalla-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1991",
    "Item Name": "Dahi Bhalla-S",
    "Selling Price": "65.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1992",
    "Item Name": "Jhal Muri-S",
    "Selling Price": "60.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1993",
    "Item Name": "Chat Platter-S",
    "Selling Price": "110.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "1994",
    "Item Name": "Dahi Papdi Chat-S",
    "Selling Price": "55.0000",
    "Category Name": "Chats"
  },
  {
    "Item Code": "2402",
    "Item Name": "ALMOND CHBAR",
    "Selling Price": "26.2000",
    "Category Name": "GIFT PACK"
  },
  {
    "Item Code": "333",
    "Item Name": "A BR SB EX",
    "Selling Price": "1.0000",
    "Category Name": "EXEMPTED"
  }
]


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);
    tr.classList.add("item-row");
    for (var j = 0; j < col.length + 1; j++) {
      //here i am adding a class with the name of the category to each items row. 
      var categoryName = tableData[i]["Category Name"];
      tr.setAttribute('data-category', categoryName);

      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 (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute('name', 'Selling_Price');
          hiddenField.setAttribute('value', tabledata);
          tabCell.appendChild(hiddenField);
        }
        if (tableData[i]['Category Name'] === tableData[i][col[j]]) {
          tabCell.innerHTML = tabledata;
          hiddenField.setAttribute('name', 'Category_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);

$('#CategoryName').on('change', function() {
  var selectedOption = this.value;
  //getting all item rows so i can target them.
  var itemRows = document.getElementsByClassName("item-row");

  if (selectedOption === 'All') {
    //If "All" then style all rows with visibility: visible.
    for (var i = 0; i < itemRows.length; i++) {
      itemRows[i].style.visibility = "visible";
    }
  } else {
    //If the selectedOption is anything other than "All",
    // firstly i am style all rows with visibility: collapse
    for (var i = 0; i < itemRows.length; i++) {
      itemRows[i].style.visibility = "collapse";
    }
    // then getting all rows which have the selectedOption as a class and style those rows with visibility: visible.
    var selectedItemRows = document.querySelectorAll('[data-category="' + selectedOption + '"');
    for (var i = 0; i < selectedItemRows.length; i++) {
      selectedItemRows[i].style.visibility = "visible";
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="divHide">
  <form action="InsertQuantityIndent" method="post" id="form1" autocomplete="on">
    <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>Chats</option>
          <option>GIFT PACK</option>
          <option>EXEMPTED</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>
      <button id="clear">
					<i class="fas fa-eraser"></i> Clear
				</button>
      <!-- <button id="print" type="button" onclick="printFunction()">
					<i class="fas fa-print"></i> Print
				</button> -->
    </div>
  </form>
</div>

EDIT2：更彻底的方法：您只需获得 all item-row，然后对每个变量进行迭代，并根据其应设置的可见性进行设置；不需要浏览器过滤您的项目。

Answer 2

您的问题似乎出在tr.classList.add(categoryName);

css类不能包含简单明了的空格。

Answer 3

替换此

  else if (response.status.status === 401) {
        throw new Error('Error in status')
  }

与此

tr.classList.add(categoryName);`

更新

如果您不想更改类别名称，则可以使用data属性作为过滤器。

从添加类列表添加数据集

tr.classList.add(categoryName.replace(/\s+/g, "-").toLowerCase());

从按类别名称选择到按数据集选择

// tr.classList.add(categoryName);
tr.dataset.category = categoryName;

// var selectedItemRows = document.getElementsByClassName(selectedOption);
var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']");

  var tableData = [
    {
      "Item Code": "1978",
      "Item Name": "Alu Chat-S",
      "Selling Price": "55.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1979",
      "Item Name": "Dahi Alu Chat-S",
      "Selling Price": "50.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1980",
      "Item Name": "Samosa-S",
      "Selling Price": "25.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1981",
      "Item Name": "SamosaChat-S",
      "Selling Price": "40.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1982",
      "Item Name": "Dahi Samosa Chats-S",
      "Selling Price": "55.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1983",
      "Item Name": "Garam Samosa Chats-S",
      "Selling Price": "55.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1984",
      "Item Name": "Kachori Chats-S",
      "Selling Price": "55.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1985",
      "Item Name": "Garam Kachori Chat-S",
      "Selling Price": "50.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1986",
      "Item Name": "Dahi Kachori Chat-S",
      "Selling Price": "55.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1987",
      "Item Name": "Dai Raj Kachori-S",
      "Selling Price": "65.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1988",
      "Item Name": "Baby Kachori Chat-S",
      "Selling Price": "65.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1989",
      "Item Name": "Dahi Baby Kachori-S",
      "Selling Price": "65.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1990",
      "Item Name": "Anar Bhalla-S",
      "Selling Price": "65.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1991",
      "Item Name": "Dahi Bhalla-S",
      "Selling Price": "65.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1992",
      "Item Name": "Jhal Muri-S",
      "Selling Price": "60.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1993",
      "Item Name": "Chat Platter-S",
      "Selling Price": "110.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "1994",
      "Item Name": "Dahi Papdi Chat-S",
      "Selling Price": "55.0000",
      "Category Name": "Chats"
    },
    {
      "Item Code": "2402",
      "Item Name": "ALMOND CHBAR",
      "Selling Price": "26.2000",
      "Category Name": "GIFT PACK"
    },
    {
      "Item Code": "333",
      "Item Name": "A BR SB EX",
      "Selling Price": "1.0000",
      "Category Name": "EXEMPTED"
    }
  ];

  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);
      tr.classList.add("item-row");
      for (var j = 0; j < col.length + 1; j++) {
        //here i am adding a class with the name of the category to each items row.
        var categoryName = tableData[i]["Category Name"];
        tr.dataset.category = categoryName;

        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 (tableData[i]["Selling Price"] === tableData[i][col[j]]) {
            tabCell.innerHTML = tabledata;
            hiddenField.setAttribute("name", "Selling_Price");
            hiddenField.setAttribute("value", tabledata);
            tabCell.appendChild(hiddenField);
          }
          if (tableData[i]["Category Name"] === tableData[i][col[j]]) {
            tabCell.innerHTML = tabledata;
            hiddenField.setAttribute("name", "Category_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);

  $("#CategoryName").on("change", function() {
    var selectedOption = this.value;
    console.log(selectedOption);
    //getting all item rows so i can target them.
    var itemRows = document.getElementsByClassName("item-row");

    if (selectedOption === "All") {
      //If "All" then style all rows with visibility: visible.
      for (var i = 0; i < itemRows.length; i++) {
        itemRows[i].style.visibility = "visible";
      }
    } else {
      //If the selectedOption is anything other than "All",
      // firstly i am style all rows with visibility: collapse
      for (var i = 0; i < itemRows.length; i++) {
        itemRows[i].style.visibility = "collapse";
      }
      // then getting all rows which have the selectedOption as a class and style those rows with visibility: visible.
      var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']");

      for (var i = 0; i < selectedItemRows.length; i++) {
        selectedItemRows[i].style.visibility = "visible";
      }
    }
  });

Answer 4

classList.add（tokens ...）在'tokens'参数中不接受ASCII空格。如其他答案中所述，您可以将空格替换为'-'。这就是我要更改代码的方式（我添加了“ replace（）”）：

//here i am adding a class with the name of the category to each items row. var categoryName = tableData[i]["Category Name"]; tr.classList.add(categoryName.replace(" ", "-"));

$('#CategoryName').on('change', function() { var selectedOption = this.value.replace(" ", "-"); console.log(selectedOption.replace(" ", "-"));

The classList attribute’s getter must return a DOMTokenList object whose associated element is the context object and whose associated attribute’s local name is class. The token set of this particular DOMTokenList object are also known as the element’s classes. 来源：https://dom.spec.whatwg.org/#dom-element-classlist

If token contains any ASCII whitespace, then throw an "InvalidCharacterError" DOMException. 来源：https://dom.spec.whatwg.org/#dom-domtokenlist-add

无法读取字符之间的空格

4 个答案:

更新