根據複選框值更新表格信息格式

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

您的標記是無效的，你不能嵌套span直接像這樣的表內和你也錯過了<tr>標籤。

然而，即使有有效的標記，你要問是不可能單獨使用CSS，因爲它不提供任何機構（至今）選擇父元素，這將需要在這裏做是爲了目標兄弟細胞或父行。

所以，你將不得不訴諸一些JavaScript，每次點擊複選框時間對父行切換的一類。

之前我們得到的片段，這裏是你需要以具有應用到需要它最初錶行的.done類與PHP做什麼：

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

而這裏的工作段來演示解決方案：

var inputs=document.querySelector(".db-table").getElementsByTagName("input"),x=inputs.length; 
 
while(x--) 
 
\t inputs[x].addEventListener("click",function(){ 
 
\t \t this.parentNode.parentNode.classList.toggle("done"); 
 
\t },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>

Answer 2

下面是一個工作示例。你的CSS永遠不會顯示，因爲你的跨度永遠不會在你的複選框（：check）中。

此時您將開始進入DOM元素。以下示例使用JavaScript/jQuery。我設置了一個監聽器來監聽複選框的變化（即是否檢查）。如果複選框被選中，那麼我會在.info類中添加一個「完成」類。

爲了知道我處理哪一行與我加入HTML標籤。 1，我添加了一個ID到tr。這應該始終是唯一的行。 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>