Question

我希望整个行可以点击。现在行看起来像

＆＃13;

<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>

＆＃13;

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

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

Answer 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 );

Answer 2

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

＆＃13;

<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>

＆＃13;

您还可以通过更改jquery选择器来概括它。如果您希望所有<tr>都采用这种方式，只需将"#row1"选择器更改为tr。

Answer 3

再仔细看一遍。您的代码与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>

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

3 个答案: