色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css表格中帶復(fù)選框

丁元新1年前6瀏覽0評論

CSS表格中的復(fù)選框可以為表格添加交互功能,讓用戶可以選擇和操作表格的每一行或每一列。

table {
border: 1px solid #ddd;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
}
td input[type=checkbox] {
margin-right: 5px;
}

首先,我們需要定義一個包含邊框樣式的表格,并設(shè)置表格單元格的填充和水平對齊方式。

接著,在表格中的復(fù)選框設(shè)置樣式。我們?yōu)楸砀裰械拿總€單元格的復(fù)選框添加了一個 margin-right 樣式,以便與后面的文本內(nèi)容有一定的間距。

<tr>
<td><input type="checkbox" id="select-all"></td>
<td>Apple</td>
<td>$1.00</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Orange</td>
<td>$1.50</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Banana</td>
<td>$0.50</td>
</tr>

最后,在表格的每一行中添加一個包含復(fù)選框元素的單元格。首先創(chuàng)建一個用于全選所有復(fù)選框的主復(fù)選框,然后為每一行添加一個單獨的復(fù)選框。

當(dāng)用戶單擊主復(fù)選框時,所有行中的復(fù)選框都將選中。如果用戶取消選中主復(fù)選框,則所有行的復(fù)選框都將清除。

$(document).ready(function() {
$('#select-all').click(function() {
$('input[type=checkbox]').prop('checked', this.checked);
});
});

最后,我們使用JavaScript代碼為主復(fù)選框添加事件偵聽器。當(dāng)用戶單擊主復(fù)選框時,我們使用jQuery選擇器選擇所有的復(fù)選框,并改變它們的狀態(tài)以與主復(fù)選框的狀態(tài)匹配。