在html中的引号内转义引号答案

【问题标题】：Escaping quotes inside quotes in html在html中的引号内转义引号
【发布时间】：2022-01-14 00:14:20
【问题描述】：

不知道为什么这个错误发生在 Chrome 和 Edge 中，但不是在 IE 中（是的，业务团队仍然坚持它）

在这个 html 行上看到“Uncaught SyntaxError: Unexpected end of input”

<TR onmouseover="rowColor(this, true);" onmouseout="rowColor(this, false);" onclick='workTicket('displayTicket.action?TICKETID=1367698&amp;TTID=14','1367698');'>

下面是对应的jsp/struts行

<TR onmouseover="rowColor(this, true);" onmouseout="rowColor(this, false);" onclick='workTicket(<c:out value="'displayTicket.action?TICKETID=${dispTO.ticketNbr}&TTID=${dispTO.ticketTypeId}','${dispTO.ticketNbr}'" />);'>

除了 onclick 属性以单引号开头之外，我在上面的行中没有看到任何错误。知道为什么会这样吗？

【问题讨论】：

标签： java html jsp

【解决方案1】：

您必须在属性中包含一组完整的 OTHER 引号

<TR onmouseover="rowColor(this, true);" 
 onmouseout="rowColor(this, false);" 
  onclick="workTicket('displayTicket.action?TICKETID=1367698&amp;TTID=14','1367698');">

c:out 没有问题

<TR onmouseover="rowColor(this, true);" 
onmouseout="rowColor(this, false);" 
onclick="workTicket(<c:out value="'displayTicket.action?TICKETID=${dispTO.ticketNbr}&TTID=${dispTO.ticketTypeId}','${dispTO.ticketNbr}'" />);">

会起作用

但我认为这更好

data-tickettypeid="<c:out value="${dispTO.ticketTypeId}" />"
data-ticketnbr="<c:out value="${dispTO.ticketNbr}" />"
onclick="workTicket(`displayTicket.action?TICKETID=${this.dataset.tickettypeid}&TTID=${this.dataset.ticketnbr}`,this.dataset.tickettypeid)"

甚至更好：

document.getElementById("myTable").addEventListener("click",function(e) {
  const tgt = e.target.closest("tr");
  if (tgt && tgt.getAttribute("data-tickettypeid")) {
    workTicket(`displayTicket.action?TICKETID=${tgt.dataset.tickettypeid}&TTID=${tgt.dataset.ticketnbr}`,tgt.dataset.tickettypeid)
  }
})

那么你可以使用

<tr data-tickettypeid="<c:out value="${dispTO.ticketTypeId}" />"
data-ticketnbr="<c:out value="${dispTO.ticketNbr}" />">

至于鼠标悬停，使用CSS

【讨论】：