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

Question

我的 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 的最高效方式是什么？

Answer 1

没有 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 的粉丝，但在移动世界中，所有可用功能的赌注都没有，你真的必须是一个虐待狂才能不使用它（或者类似的东西）。}

Answer 2

NO可以切换复选框并仅使用 HTML 和 CSS 突出显示一行，您需要使用 Javascript 或 jQuery...

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

Demo - 来自here

---

如果您想突出显示该行，您可以使用.closest() 定位父级tr 并在其中添加class

Demo 2

$("input[type='checkbox']").change(function(e) {
    if($(this).is(":checked")){ 
        $(this).closest('tr').addClass("colorize");
    }else{
        $(this).closest('tr').removeClass("colorize");
    }
});

如果复选框布尔值更改，则会调用上述内容，如果是，则我们将 colorize 类添加到它，如果不是，我们将其删除。

Answer 3

我知道这已经很老了，但是...

您可以使用 display: table-row / table-cell 模拟带有 CSS 的表格，并使用标签制作您的行。

它是有效的，它可以工作，并且它按照 OP 的要求执行 - 没有 javascript。

注意：为了使突出显示起作用，每行需要一个额外的元素。该元素需要它的尺寸固定，包括高度和宽度。为此，需要预先确定表格的宽度和行高。

.table {
  display: table;
  width: 300px;
}

.row {
  display: table-row;
  line-height: 30px;
}

.cell {
  position: relative;
  z-index: 0;
  display: table-cell;
  padding: 5px 10px;
  background: rgba(0, 0, 0, .1);
}

.highlight {
  position: absolute;
  z-index: -1;
  display: none;
  width: 300px;
  height: 40px;
  margin: -35px 0 0 -10px;
  background: rgba(0, 0, 0, .4);
}

:checked + .highlight {
  display: block;
}

<div class='table'>
  <label class='row'>
    <span class='cell'>
      <input type='checkbox'/>
      <span class='highlight'></span>
    </span>
    <span class='cell'>1</span>  
    <span class='cell'>First row</span>  
  </label>
  <label class='row'>
    <span class='cell'>
      <input type='checkbox'/>
      <span class='highlight'></span>
    </span>
    <span class='cell'>2</span>  
    <span class='cell'>Second row</span>  
  </label>
</div>

Answer 4

您只需使用 HTML5 的 <label> 标签和 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>

请在此处查看更多详细信息：http://www.w3schools.com/tags/att_label_for.asp