[英]How to wrap a row of the table when a checkbox in it is selected?
我正在處理一個表,當單擊該特定行中的復選框時,必須在其中選擇一行。 僅應選中已選中復選框的行,或者可以說用紅色突出顯示該行。 我一直在嘗試在JavaScript / jquery中使用包裝函數,這在我的表中未顯示任何效果。 我添加了我正在工作的代碼部分。 我該怎么做?
Response.Write "<table><tr><td class='cell1'>Project</td><td class='cell1'>Project ID</td><td class='cell1'>Finish</td></tr>"
WHILE NOT rs.eof
Response.Write "<tr><td class='celld'>"& rs(projectname") &".</td>"
Response.Write "<td class='celld'>"& rs("productID") &"</td>"
Response.Write"<td class='celld'><input var='"& rs("productID") &"' type='checkbox' id='finish' checked></td></tr>"
rs.MoveNext
WEND
<script>
$("#finish").onclick(function(){
$(".celld").wrap(" <div style='color:red'/>");
});
</script>
當復選框內部更改狀態時,可以在parent(ancestor) tr
上切換.highlight
類:
$(document).ready(function(){
$("table input[type='checkbox']").on('change', function(){
$(this).closest('tr').toggleClass("highlight");
});
});
CSS:
.highlight{
background-color:red;
}
檢查以下代碼段
$(document).ready(function() { $("table input[type='checkbox']").on('change', function() { $(this).closest('tr').toggleClass("highlight"); }); });
table { border: 2px solid blue; } table td { border: 1px solid green; } .highlight { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>Col 1</td> <td>Col 2</td> <td>Col 3</td> <td>Col 4</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Select row <input type="checkbox"> </td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Select row <input type="checkbox"> </td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Select row <input type="checkbox"> </td> </tr> </table>
我看到您正在使用jQuery,因此實際上非常簡單。 將一個on change偵聽器附加到該復選框,然后每當觸發更改時,選擇它的父級tr
元素並對其應用一個類。
$('.checkbox').on('change', function() {
$(this).parents('tr').addClass('hightlight');
});
請注意,您還需要在樣式中定義此類,以使其實際在視覺上更改行。
您的代碼有幾個問題。 首先,在循環內部,您將創建具有相同id
屬性的多個元素,這是無效的。 您應該使用通用類來選擇元素。 另外input
沒有var
屬性,我想這應該是value
。
從那里,您可以將單個事件處理程序附加到所有遍歷DOM的元素上,以找到相關的tr
。 請注意,添加click事件處理程序的jQuery方法是click()
,而不是onclick()
。 使用復選框,您還應該連接到change
事件,以適應那些通過鍵盤瀏覽的情況。 您還可以使用toggleClass()
基於復選框的checked
屬性的狀態來設置類。
最后,您不能將td
包裝在div
因為這也是無效的。 最好將簡單的類添加到tr
,以設置所需的CSS規則。 像這樣:
<table cellpadding="2" width="100%" cellspacing="0" border="1">
<tr>
<td class="tdcell1">Project</td>
<td class="tdcell1">Project ID</td>
<td class="tdcell1">Finish</td>
</tr>
<tr>
<td class="tdcelld">Project Name #1.</td>
<td class="tdcelld">ProductId #1</td>
<td class="tdcelld">
<input value="ProductId1" type="checkbox" class="finish">
</td>
</tr>
<tr>
<td class="tdcelld">Project Name #2.</td>
<td class="tdcelld">ProductId #2</td>
<td class="tdcelld">
<input value="ProductId2" type="checkbox" class="finish">
</td>
</tr>
</table>
$(".finish").click(function(){
$(this).closest('tr').toggleClass('red', this.checked);
});
.red { color: red; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.