3

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

4

4 回答 4

3

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

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

演示- 从这里

如果要突出显示该行，您可以需要使用.closest()来定位父级tr并添加class一个

演示 2

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

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

于 2013-10-11T11:59:34.477 回答
3

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

于 2013-10-11T12:33:31.743 回答
1

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

您可以使用 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>

于 2016-08-06T04:56:18.797 回答
1

您可以简单地通过使用 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

于 2016-12-05T11:30:33.283 回答