Html 单击不带javascript的表行时切换复选框

我的HTML5/PHPWeb应用程序（移动）中有一个HTML表。用户应该能够通过单击行上的任意位置来选择行。选定的行也应更改颜色

该表的结构如下所示：

<table>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Status</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="ids[]" value = "1"></td>
        <td>This is the name</td>
        <td>Completed</td>
    </tr>
    ...
</table>

名称
地位
这就是名字
完整的
...

（name=ids[]用于PHP获取选定值的列表）

由于手机在JavaScript中没有太多的性能，如果可能的话，我想避免使用它。是否有可能通过CSS/HTML实现这一点

---

如果没有，使用JavaScript最有效的方法是什么？

有一种方法可以切换复选框并仅使用HTML和CSS高亮显示行，您需要使用JavaScript或jQuery

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

-来自

---

如果要突出显示该行，则需要使用

.closest（）


如果布尔值复选框被更改，则会调用上述内容。如果布尔值更改，则会向其添加
colorize
类；如果布尔值更改，则会将其删除。
如果没有Javascript，则无法处理单击事件。可能会使用一些丑陋的黑客，这会使您的标记和样式变得可怕且无法阅读，从而使您看起来可以在CSS中处理单击事件，但这在生产应用程序中并不实际，尤其是在移动设备上，而且通常不是一个好主意

因此，我们将讨论Javascript。如果您想在浏览器中使用高性能的Javascript，首先要考虑的是避免使用像jQuery这样的库，它会在您所做的每件事情周围添加大量的锅炉板包装器代码

因此，您希望以最简单、最高效的方式在Javascript中实现它，这将是以下几点：

// yep, window.onload. You want compat in mobiles, you have to stupidify your
// code a *lot*
window.onload = function() {
    var i, l,
        trs = document.getElementsByTagName('TR');

    for (i = 0, l = trs.length; i < l; i++) {
        attachClickHandler(trs[i]);
    }
};

function clickHandler()
{
    if (this.isSelected) { // expando properties. sorry, compat again
        // change color, check checkbox, whatever
        this.isSelected = false;
    } else {
        // opposite of above
        this.isSelected = true;
    }
}

function attachClickHandler(tr)
{
    tr.onclick = function() {
        clickHandler.call(tr);
    };
}

//是的，window.onload。如果你想在手机上有同情心，你就得把你的手机弄糊涂
//代码很多*
window.onload=函数（）{
变量i，l，
trs=document.getElementsByTagName（'TR'）；
对于（i=0，l=trs.length；i

太可怕了，不是吗


或
…您可以只使用jQuery mobile，如果它真的成为用户抱怨的真正问题，而不是理论问题，您可以担心性能

注意：一般来说，我不是jQuery的粉丝，但在移动世界中，所有可用功能的赌注都被打掉了，你真的必须是一个虐待狂才能不使用它（或类似的东西）。
我意识到这很古老，但是

您可以使用display:table row/table cell模拟带有CSS的表，并使您的行脱离标签

它是有效的、有效的，并且它实现了OP要求的功能—没有javascript

注意：为了使高亮显示正常工作，每行需要一个额外的元素。该元素需要固定其尺寸，包括高度和宽度。因此，需要预先确定表格的宽度和行高


.table{
显示：表格；
宽度：300px；
}
.行{
显示：表格行；
线高：30px；
}
.细胞{
位置：相对位置；
z指数：0；
显示：表格单元格；
填充物：5px10px；
背景：rgba（0,0,0,1）；
}
.亮点{
位置：绝对位置；
z指数：-1；
显示：无；
宽度：300px；
高度：40px；
利润率：-35px0-10px；
背景：rgba（0,0,0,4）；
}
：选中+加亮显示{
显示：块；
}

1.
第一排
2.
第二排
您只需使用HTML5
标记和
for=“identifier”
属性即可实现

在本例中，您需要为复选框添加
id
属性（字符串+值可能是一个选项），然后为其余的表格单元格创建标签

<table>
  <tr>
    <th></th>
    <th>Name</th>
    <th>Status</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="ids[]" value="1" id="ids_1"></td>
    <td><label for="ids_1">This is the name</label></td>
    <td><label for="ids_1">Completed</label></td>
  </tr>
  ...
</table>


名称
地位
这就是名字
完整的
...

请在此查看更多详细信息：
@danrhul:我也想看看解决方案。我认为纯CSS无法实现所需的行为。@danrhul:无论您找到什么解决方案（我知道你在想
这是无效的。没有JavaScript就没有正确的方法。如果不使用JavaScript，这是可能的，它只意味着你会在视觉上模仿一个我没有时间的表格。只要指出你说过它是不可能的。@danrhul:（不是trolling）但如果你能举一个简单的例子，那将非常有帮助，因为我们都想学习。
<table>
  <tr>
    <th></th>
    <th>Name</th>
    <th>Status</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="ids[]" value="1" id="ids_1"></td>
    <td><label for="ids_1">This is the name</label></td>
    <td><label for="ids_1">Completed</label></td>
  </tr>
  ...
</table>