html - 在没有javascript的情况下单击表格行时切换复选框

Question

我的 HTML5/PHP 网络应用程序(移动)中有一个 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 获取选定值的列表)

由于 Phones 在 JavaScript 中的性能不高，我希望尽可能避免使用它。是否可以通过 CSS/HTML 以某种方式实现这一点？

如果不是，使用 JavaScript 的最高效方式是什么？

Answer 1

没有 Javascript 就无法处理点击事件。可以使用一些丑陋的 hack，这将使您的标记和样式变得可怕且无法阅读，使其看起来就像您可以在 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);
    };
}

很可怕，不是吗？

---

或

...您可以只使用 jQuery mobile，如果它真的成为用户提示的实际问题，而不是理论上的问题，您就会担心性能。

_{注意:总的来说，我不是 jQuery 的粉丝，但在移动世界中，就可用功能而言，所有的赌注都没有，你真的必须是一个虐待狂才能不使用它(或者类似的东西)。}