1

我有一个表格，如果单元格被禁用，我希望每个单元格都有红色背景，如果启用则蓝色。所以我在每个单元格中插入了一个不可见的复选框。当我有标签而不是表格时，它可以正常工作（请参见此处的示例），但它不适用于表格。

HTML：

  <table id="hours">
    <tbody>
      <tr>
        <td id="tdh00"><input type="checkbox" id="h00"></td>
        <td id="tdh01"><input type="checkbox" id="h01"></td>
      </tr>
    </tbody>
  </table>

CSS：

input[type=checkbox] { visibility: hidden; }
#hours input[type=checkbox]:checked  + #tdh00 { background-color: #265BFA; }
#hours input[type=checkbox]:not(:checked) + #tdh00 { background-color: #FA2421; }
4

2 回答 2

1

像下面这样尝试这是使用JQuery的解决方案：

小提琴：http: //jsfiddle.net/RYh7U/138/

HTML：

<table id="hours" border="1">
 <tbody>
    <tr><td id="tdh00"><input type="checkbox" id="h00"></td><td id="tdh01"><input type="checkbox" id="h01"></td></tr>
    </tbody>
</table>
</body>

CSS： 

input[type=checkbox] { visibility: hidden; }

查询：

$("#hours td").each(function(e){ 
    var ele = $(this).children('input[type=checkbox]');
    var flag = ele.prop('checked');
    if(flag)
    {
        ele.prop('checked', false);
        $(this).css("background", "#265BFA");
    }
    else
    {
        ele.prop('checked', true);
        $(this).css("background", "#FA2421");
    }
});

$("#hours td").click(function(e){ 
    var ele = $(this).children('input[type=checkbox]');
    var flag = ele.prop('checked');
    if(flag)
    {
        ele.prop('checked', false);
        $(this).css("background", "#265BFA");
    }
    else
    {
        ele.prop('checked', true);
        $(this).css("background", "#FA2421");
    }
});
于 2013-04-16T11:05:16.777 回答
0

就目前的标记而言，这是行不通的。您正在使用+（兄弟）选择器，但您的表格单元格不是复选框的兄弟。在您给出的示例中，标记为：

<div class="slideOne">  
    <input type="checkbox" value="None" id="slideOne" name="check" />
    <label for="slideOne"></label>
</div>

你的是：

<td id="tdh00"><input type="checkbox" id="h00"></td>

因此，您正在尝试根据其子元素的状态设置父元素的样式，目前仅靠 CSS 是不可能的。

编辑

查看这个工作示例。那个小提琴添加了label后面（这将有助于可访问性），并以这样的方式定位它，它可以在视觉上完成你所追求的。标记需要是：

<table id="hours">
    <tbody>
      <tr>
        <td id="tdh00">
            <div>
                <input type="checkbox" id="h00">
                <label for="h00">Label</label>
            </div>
        </td>
        <td id="tdh01">
             <div>
                <input type="checkbox" id="h01">
                <label for="h01">Label</label>
              </div>
        </td>
      </tr>
    </tbody>
  </table>

和CSS：

table {
    width: 450px;
    margin: 0 auto;    
}
td {
    border: 1px solid #333;
    padding: 0;
}

td > div { position: relative; }

input[type=checkbox] { visibility: hidden; }

label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
    text-indent: -999em;
}

input[type=checkbox]:checked  + label { background-color: #265BFA; }

每个表格单元格中的额外div内容是必要的，因为 Firefox 无法处理相对于td元素的定位。

浏览器支持很好，但只支持 IE9+，因为我们使用的是:checked伪类。您将通过基于 JavaScript 的解决方案获得更好的支持，但我认为这是渐进增强的绝佳候选者。

编辑 2

如果需要支持旧的 IE，那么您将需要求助于 JavaScript。这是一个使用 jQuery的示例。

JavaScript 只是在表格单元格中添加了一个类active：大部分工作仍然使用 CSS 完成。

$("#hours input").on('change', function(){
    var checkbox = $(this),
        tableCell = checkbox.parents('td');

    checkbox.is(':checked') ?
        tableCell.removeClass('active') :
        tableCell.addClass('active');
}).change();

HTML 保持不变，CSS 仅略有不同，这些行替换了:checked伪类：

td { background-color: #265BFA; }
.active { background-color: red; }
于 2013-04-16T10:38:11.453 回答