包装html标签以使所有可点击答案

【问题标题】：wrap html tags to make all clickable包装html标签以使所有可点击
【发布时间】：2016-06-14 11:58:38
【问题描述】：

我希望将整行变成可点击的。现在这些行看起来像

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>      
<tr>
            <label for="object_303">
                <td><input checked="checked" id="object_303" name="objects" type="checkbox"/></td>
                <td>Group</td>
                <td>Obj name</td>
            </label>
        </tr>
</table>

这似乎与 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label_default_css 正确匹配，它显示了包装在标签中如何使其全部可点击。

如何将整行包装成可点击的？萨拉马特

【问题讨论】：

包装表格行的内容没有意义； <tr> 的直接子元素必须是 <td> 或 <th> 元素。
只需在<tr> 上放置一个“点击”处理程序。

标签： javascript jquery html django django-widget

【解决方案1】：

您的 HTML 已损坏...只有 thead、tbody 或 tr 应该在表格内。内部 tr 应该是 td。正如@Pointy 建议的那样，在 tr 标签中放置一个类会引用整行。我修改了您的代码，请参见下文，并注意 <label> 标记的位置。

<table>      
<tr class="myclass">
<td>
  <label for="object_303">
    <input checked="checked" id="object_303" name="objects" type="checkbox"/>
  </label>
</td>
<td>Group</td>
<td>Obj name</td>
</tr>
</table>

还有 jquery：

$(".myclass").click( myFunction );

【讨论】：

在 w3 示例中，您可以将其他子标签（如 p）包装在标签中，它可以工作。我正在尝试使 td 标签可点击，换句话说就是行本身
好的 - 我希望在放置标签的位置有所不同 - 但是，如果您的目标是使整行可点击，那么我的代码就是这样做的。 tr 标签有 myclass 类，tr 标签引用整行，并且事件已应用于该类（因此，整行）。
我不知道您指的是什么 w3 示例。我知道的唯一 w3 网站是w3schools.com/html/html_tables.asp，它没有在表格内提及标签标签，在 tr 标签之外。
似乎唯一可以包装的是radio 按钮，而不是复选框。这让我大吃一惊。它们看起来很相似
您要么误读了文档，要么阅读了错误的文档。我建议您找到其他帮助文本或书籍的来源。

【解决方案2】：

您可以使用一些 jQuery 来做到这一点。试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#row1").click(function() {
        ($(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked")));
    });
});
</script>
<table>      
<tr id="row1">
                <td><input checked="checked" id="object_303" name="objects" type="checkbox"/></td>
                <td>Group</td>
                <td>Obj name</td>
        </tr>
</table>

您也可以通过更改 jquery 选择器来概括这一点。如果您希望所有<tr>s 都以这种方式运行，只需将"#row1" 选择器更改为tr。

【讨论】：

【解决方案3】：

再仔细看一遍。您的代码与 w3c 不匹配，您不需要使用标签标签包装元素。标签的for 属性和输入的id 应该匹配。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>      
  <tr>
    <td><input checked="checked" id="object_303" name="objects" type="checkbox"/></td>
    <td><label for="object_303"> Group obj name</label></td>
  </tr>
</table>

【讨论】：

for 和 id 匹配。我正在尝试使 2 个td 标签可点击
不匹配我的意思是用标签标签包装元素。您可以制作任意数量的可点击元素，只需放置另一个带有for 属性的标签。 <td><label for="object_303"> 1</label></td><td><label for="object_303"> 2</label></td> 会工作的。
虽然这可能是真的，但在 w3 代码模拟器中使用 label 包装几个 td 元素确实有效
@codyc4321yes，但为了使标签可点击，您不需要包装它。单击操作由for 属性提供。在许多情况下，更多的是语义不正确（例如用标签标签包装 p 或 h3 会导致错误）。