![](/img/trans.png)
[英]JQUERY Add checked attribute to checkbox depending on Table column value `Status` (1 or 0)
[英]jQuery table - How to write text in cell depending on checkbox checked
我有一個簡單的表,其中class=".table"
包含4列,其類如下
•.delete //這是復選框列,
•。ID,
•。描述,
•。旗
並有一個帶有class=".savebtn"
的按鈕。 我需要什么:當用戶選中".delete"
列中的任何復選框單元格時,在帶有文本“ d”的同一行中更新標志單元格,然后在用戶單擊".savebtn"
時刪除此選中的行。
我嘗試此代碼,但無法正常工作,請幫助我:
$('.savebtn').click(function() {
$('.cf-table-block tbody tr').each(function() {
$(this).find($("input[name='delete[]']:checked")).each(function() {
$(this).change(function() {
$(this).closest("tr").find(".flag input").val("d"));
$(this).closest('tr').remove();
});
});
});
});
元素屬性應為class="table"
如下所示
<p class="myClass"></p>
$(".myClass").click( ...
您可以使用一個更簡單的功能:
$('.savebtn').click(function() {
$("td input.delete:checked").each(function(index, element) {
$(element).closest("tr").remove();
});
});
它的作用是,當單擊具有“ savebtn”類的按鈕時,它將找到所有已選中的具有“ delete”類的輸入元素。 對於它們中的每一個,它都會找到最接近的tr並將其刪除。
$('.savebtn').click(function() { $('.cf-table-block tbody tr').each(function() { console.log($(this)) $(this).find($(".delete:checked")).each(function() { $(this).closest("tr").find("input:text.flag").val("d"); //$(this).closest('tr').remove(); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" class='cf-table-block'> <tr> <th>Delete</th> <th>ID</th> <th>Description</th> <th>Flag</th> </tr> <tr> <td align="center"> <input type="checkbox" class="delete"> </td> <td>any Data</td> <td>any Data</td> <td> <input type="text" class="flag" /> </td> </tr> <tr> <td align="center"> <input type="checkbox" class="delete"> </td> <td>any Data</td> <td>any Data</td> <td> <input type="text" class="flag" /> </td> </tr> <tr> <td align="center"> <input type="checkbox" class="delete"> </td> <td>any Data</td> <td>any Data</td> <td> <input type="text" class="flag" /> </td> </tr> <input class="savebtn" style="width: 65px; font-size: 16px;" type="button" value="Save">
$('.savebtn').click(function() {
$('.cf-table-block tbody tr').each(function() {//added the class in html
console.log($(this))
$(this).find($(".delete:checked")).each(function() {//no attr name but class
$(this).closest("tr").find("input:text.flag").val("d");//input type text with class flag
//$(this).closest('tr').remove();//commented to see the letter d
});
});
});
做這個
用這個:
$('.savebtn').click(function() {
$('.cf-table-block tbody tr').each(function() {
$(this).find($("input[name='delete[]']:checked")).each(function() {
if($(this).closest("tr").find(".flag input").text().indexOf("d") > -1)){
$(this).closest('tr').remove();
}
});
});
});
您可以按照以下步驟進行操作。
$('.savebtn').click(function() { $('.delete :checkbox:checked').closest('tr').remove(); }); $('.delete :checkbox').change(function() { var d = this.checked ? 'd' : ''; $(this).closest("tr").find(".flag").val(d); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tr> <th>Delete</th> <th>ID</th> <th>Description</th> <th>Flag</th> </tr> <tr> <td class="delete"><input type="checkbox"/></td> <td>any data</td> <td>any data</td> <td><input type="text" class="flag" /></td> </tr> <tr> <td class="delete"><input type="checkbox"/></td> <td>any data</td> <td>any data</td> <td><input type="text" class="flag"/></td> </tr> <tr> <td class="delete"><input type="checkbox" /></td> <td>any data</td> <td>any data</td> <td><input type="text" class="flag" /></td> </tr> </table> <input type="button" class="savebtn" value="Save"/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.