Question

我有一个表，其中包含使用php从SQL数据库中获取的项目列表。有一个复选框，完成，我想在列表完成时勾选。我希望关联项目的文本在勾选框时更新为灰色或删除线。

我尝试使用上述方法之一：在CSS中

:checked + span {
   font-weight: bold;
}

在HTML中

<table cellpadding="1" cellspacing="1" class="db-table">

<td><input type="checkbox" name="Done1" value="1" <?php if ($info['Done1'] ==1) echo 'checked'; ?>></td>
    <span>
    <td><?php echo $info['Seq1'];?></td>
    <td><?php echo $info['Size1'];?></td>
    </span>

</table>

它不起作用。该表还具有基于类的CSS格式。我采用相同的数据，把它放在表标签之外，它工作得很好。有什么建议在这做什么？表类是否以某种方式覆盖了我想要做的事情？

Answer 1

这是一个工作示例。您的CSS永远不会显示，因为您的范围永远不在您的复选框内（：check）。

此时您将开始进入DOM Elements。以下示例使用JavaScript / jQuery。我设置了一个监听器来监听复选框的更改（即是否检查）。如果选中该复选框，则添加＆＃34;完成＆＃34;上课.info班。

为了知道我处理的哪一行已添加到HTML标记中。 1，我已经为tr添加了一个ID。这应始终是行唯一的。 2，我在复选框元素中添加了data-row。这用于标识行。

在这个实例中使用JavaScript非常棒，因为您希望动态更改CSS允许的层次结构之外的元素。

它可能略高于顶部，但绝对可以完成任务。

<?php
$info['Done1'] = 0;
$info['Seq1'] = 'Hello';
$info['Size1'] = 'World';
?>

<style type="text/css">
.done{color:#ccc;}
</style>

<table cellpadding="1" cellspacing="1" class="db-table">
    <tr id="row1">
        <td><input type="checkbox" name="Done1" value="1" data-row="1" <?php if ($info['Done1'] ==1) echo 'checked'; ?>></td>
        <td class="info"><?php echo $info['Seq1'];?></td>
        <td class="info"><?php echo $info['Size1'];?></td>  
    </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('input[name="Done1"]').change(function(){
        if( this.checked ){
            $('#row'+$(this).data('row')+' .info').addClass('done');
        }else{
            $('#row'+$(this).data('row')+' .info').removeClass('done');
        }       
    });
});
</script>

Answer 2

您的标记无效，您无法将span直接嵌套在这样的表格中，而且您也错过了<tr>标记。

然而，即使使用有效的标记，单独使用CSS也无法提出要求，因为它没有提供任何用于选择父元素的方法，这需要在此处完成以便定位兄弟细胞或父母行。

因此，每次单击一个复选框时，您将不得不使用一些JavaScript，在父行上切换一个类。

在我们开始使用Snippet之前，您需要对PHP进行操作，以便将.done类应用于最初需要它的表行：

<table cellpadding="1" cellspacing="1" class="db-table">
    <tr<?php if ($info['Done1'] ==1) echo ' class="done"';?>>
        <td>
            <input<?php if ($info['Done1'] ==1) echo ' checked="checked"';?> type="checkbox" name="Done1" value="1">
        </td>
        <td><?php echo $info['Seq1'];?></td>
        <td><?php echo $info['Size1'];?></td>
    </tr>
</table>

这是一个可用的Snippet来演示解决方案：

var inputs=document.querySelector(".db-table").getElementsByTagName("input"),x=inputs.length;
while(x--)
	inputs[x].addEventListener("click",function(){
		this.parentNode.parentNode.classList.toggle("done");
	},0);

.done td{
    font-weight:bold;
}

/* Just some prettifying */table{border:1px solid #999;border-spacing:1px;font-family:arial;font-size:14px;margin:0 auto;width:50%;}td{line-height:20px;padding:5px;}td:first-child{text-align:center;width:20px;}tr:nth-child(odd) td{background:#eee;}tr:nth-child(even) td{background:#ddd;}

<table cellpadding="1" cellspacing="1" class="db-table">
    <tr>
        <td>
            <input type="checkbox" name="Done1" value="1">
        </td>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="Done2" value="1">
        </td>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="Done3" value="1">
        </td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

根据复选框值

2 个答案: