包装 html 标签，使所有标签都可点击

Question

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

<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 正确匹配，显示了标签中的包装如何使其全部可点击。

如何将整行换行以便可以点击？萨拉马特

Answer 1

再仔细看一遍。您的代码与 w3c 不匹配，您不需要用 label 标记包装元素。标签的 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>

Answer 2

您的 HTML 已损坏...只有 thead、tbody 或 tr 应位于 table 内。里面的tr应该是td。正如@Pointy 建议的那样，在 tr 标记中放置 class 会引用整行。我修改了您的代码，请参见下文，并注意 <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 );

Answer 3

您可以在顶部添加一些 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> 都以这种方式运行，只需将 "#row1" 选择器更改为 tr.

包装 html 标签，使所有标签都可点击

wrap html tags to make all clickable

html

javascript

django

jquery

django-widget