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

概述我的 HTML5 / PHP Web应用程序(移动)中有一个HTML表.用户应该能够通过单击行的任何位置来选择行.选定的行也应该更改颜色. 该表的结构如下： <table> <tr> <th></th> <th>Name</th> <th>Status</th> </tr> <tr> <td><input ty 我的 HTML5 / PHP Web应用程序(移动)中有一个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的最佳性能是什么？

解决方法 没有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);    };}

太可怕了,不是吗？

要么

…你可以使用jquery mobile,并且如果它实际上成为用户抱怨的真正问题而不是理论问题,则担心性能.

注意：一般来说,我不是jquery的粉丝,但在移动世界中,所有赌注都在可用功能方面都没有,你真的必须是一个不使用它(或类似的东西)的虐待狂.

总结

以上是内存溢出为你收集整理的html – 在没有javascript的情况下单击表格行时切换复选框全部内容，希望文章能够帮你解决html – 在没有javascript的情况下单击表格行时切换复选框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。