javascript - 如何使用 html、Javascript、CSS 或其他工具按颜色代码或 bookweb 中的类别对教科书进行排序？

Question

我目前正在尝试对由 bookweb(书店购物车解决方案)动态生成的教科书列表进行排序。我想按规定或推荐的教科书类型订购购物车。目前，该信息由购物车问题在类型字段中提供，我们无法编辑购物车 cgi 文件以像那样对它们进行排序。所以主要排序是按科目，学生最多可以输入 4 个，次要排序是按规定或推荐的教科书类型按该顺序排序。目前的格式如下:

Title             Type          Author           ISBN                Price

Subject Name      
Textbooks         Prescribed    xxxx             xxxx                xxx
Textbooks         Recommended   xxxx             xxxx                xxx

Subject Name....//it then repeats for all subjects entered

我需要的是:

Title          Author           ISBN                Price

Subject Name 
Prescribed     
 Textbooks     xxxxx            xxxx                xxx
Recommended 
 Textbooks     xxxxx            xxxx                xxx

Subject Name....//it then repeats for all subjects entered

我曾尝试使用 Javascript 和 CSS 根据类型对书籍进行颜色编码，但它只在第一行并且只规定了:

if (<BOOKWEB-TYPE> == "Prescribed"){
  //alert("prescribed");
  document.getElementById("textbook").className = "bsPrescribed";
}
else if (<BOOKWEB-TYPE> == "Recommended"){
  //alert("recommended");
  document.getElementById("textbook").className = "bsRecommended";
}

我输入了故障排除警报，即使列表中有推荐书籍，也只有规定的警报出现。我也尝试过 getElementsByName 但这根本不起作用。即使它确实如此，但我仍然会混合颜色，因为它不会按首选的那两个类别(规定或推荐)对书籍进行分类。

实现此目标最快、最简单的方法是什么。

更新1:

现在 getElementById 甚至没有突出显示第一行，它确实更改了类，但 CSS 从未生效。现在连类(class)都没有改变。

更新2:

糟糕，我在这里打错了，修复了它并检查了代码膨胀它很好，但现在它根本不运行那个脚本，随着进一步的困惑我意识到我需要引号围绕 <BOOKWEB-TYPE>所以:

if ("<BOOKWEB-TYPE>" == "Prescribed"){
  alert("prescribed");
  document.getElementById("textbook").className = "bsPrescribed";
}

else if ("<BOOKWEB-TYPE>" == "Recommended"){
  alert("recommended");
  document.getElementById("textbook").className = "bsRecommended";
}

但现在它所做的是它只更新第一行，并且在达到规定的书籍时将其着色为绿色，在达到推荐的书籍时将其着色为黄色(根据定义的 CSS 类)，但它不会更改类第一行之后的任何其他书籍。尽管警报显示正常，但它们应该显示正常，所以我知道它是规定的与推荐的区别。

更新 3:

试过这个，现在连突出显示都不起作用，因为在类里面没有改变。我认为相同的 ID 会有问题。

if ("<BOOKWEB-TYPE>" == "Prescribed"){
  alert("prescribed");
  document.getElementsByName("textbook").className = "bsPrescribed";
}
else if ("<BOOKWEB-TYPE>" == "Recommended"){
  alert("recommended");
  document.getElementsByName("textbook").className = "bsRecommended";
}

更新 4:教科书行的 HTML 代码:

<tr name="textbook" id="textbook" valign=top>
<td align=center valign=top class="bntablerow"><input type="checkbox" name="<BOOKWEB-APN>" /></td>
<td id="bntable" class="bntablerow"><a href="<BOOKWEB-BINHREF>details<BOOKWEB-CGIEXT>?ITEMNO=<BOOKWEB-APN>"><BOOKWEB-TITLE></a></td>
<td class="bntablerow"><BOOKWEB-TYPE>&nbsp;</td>
<td class="bntablerow"><BOOKWEB-AUTHOR>&nbsp;</td>
<td class="bntablerow"><BOOKWEB-ISBN>&nbsp;</td>
<td align="right" class="bntablerow">$<BOOKWEB-PRICE></td>

更新 5:所以我将代码更改为:

 var myTR = document.getElementsByTagName('tr');
  for (var i=0;i<myTR.length;i++) {
    if ("<BOOKWEB-TYPE>" == "Prescribed") {
      myTR[i].className = 'bsPrescribed';
    }
  }

这会给规定的颜色上色，而让推荐的颜色不上色，这没关系，但问题是如果你有两个或三个主题，它一次只适用于一个主题，然后它会为所有行着色。有什么想法吗？

Answer 1

正如@Morpheus 提到的 =是赋值运算符。因此，您正在分配 <BOOKWEB-TYPE>值 Prescribed而不是检查它是否包含该值。

您应该使用比较运算符 ==或 === .

一些 more information .