javascript - Javascript 创建的复选框未正确关闭标签

Question

如果我创建一个这样的复选框，并将其添加到我的表 [TD] 标记中：

var chkBx = document.createElement('input');
chkBx.type = 'checkbox';

td.appendChild(chkBx);

它会创建

<tr>
    <td>
        <input type="checkbox" value="Current Issue">
    </td>
</tr>

此输入标签尚未正确关闭。这在我的代码中的其他地方引起了问题（例如悬停不起作用）。

我需要在我的 Javascript 中做些什么来让它正确关闭吗？

score 0 · Accepted Answer

你的 CSS 选择器没有选择任何东西。

.Table .Popup tr:hover {
    background-color:red;
}

应该：

.Popup tr:hover {
    background-color:red;
}

和

.Table .Popup .PopupRow:hover {
    background-color:red;
}

应该

table tr.PopupRow:hover {
    background-color:red;
}

或者

table .PopupRow:hover {
    background-color:red;
}

请注意，它们都将选择相同的元素，因此具有更多特异性的选择器（第二个）将是实际使用的选择器。

您的第一个选择器.Table .Popup tr:hover将匹配tr当前悬停在其上的元素，并且这些元素是任何具有.Popup类的元素的后代，而这些元素又是具有Table.

您的第二个选择器将匹配.Table .Popup .PopupRow:hover当前PopupRow悬停在.PopupTable

您的小提琴中的标记没有反映该结构，因此选择器没有匹配任何内容（这就是您的样式没有反映的原因）。

score 0 · Accepted Answer

这取决于您使用的 DOCTYPE。XHTML 需要结束标记，而 HTML 不需要。我认为浏览器会根据 DOCTYPE 自动决定动态创建的元素是否需要关闭标签。

jsfiddle上的解析器似乎也有问题。尽管在 W3C 验证器上正确验证了标记，但如果没有结束标记，它就无法工作。

2 回答 2