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以获取所选值的列表）

由于手机在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");
    }
});

如果复选框boolean已更改，则会调用上面的内容，如果是，则向我们添加colorize类，如果不是，则删除。

Answer 3

我意识到这已经很老了，但是......

你可以使用display：table-row / table-cell模拟一个包含CSS的表，并用标签创建行。

它有效，它有效，并且它执行OP所要求的 - 没有javascript。

注意：为了突出显示工作，每行需要一个额外的元素。该元素需要固定高度和宽度的尺寸。因此，需要预先确定工作台的宽度，并且需要预先确定行高。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

单击没有javascript的表格行时切换复选框

3 个答案:

或者