I am trying to delete the rows of my html table inside a form whose checkboxes are checked.
Here is my HTML:
<table>
<tr class="row">
<td><input type="text"></td>
<td><input type="checkbox" value="Delete" name="foo"/></td>
</tr>
<tr class="row">
<td><input type="text"></td>
<td><input type="checkbox" value="Delete" name="foo"/></td>
</tr>
</table>
<input type="button" id="btnDelete" value="Remove Selected"/>
Here is my jquery script:
$(function () {
$('#btnDelete').on('click', function () {
;
$('input[name=foo]').each(function (i, obj) {
if (obj.checked) {
alert("clicked!!" + i + " " + jQuery.type(obj));
obj.parents().eq(1).empty();
}
});
});
});
Now on clicking the btnDelete, the script is invoked as alert shows up.But the grandFather element(i.e. <tr>) is not getting emptied with child getting deleted. Hence the pathogenic line seems to be:
obj.parents().eq(1).empty();
So how should I remove the table row(i.e.<tr>) along with its all child nodes whose checkbox is checked?
You can try .has() function like
$('tr').has('input[name=foo]:checked').remove();
Your code will be reduced to
$(function () {
$('#btnDelete').on('click', function () {
$('tr').has('input[name=foo]:checked').remove();
});
});
Try $(obj).closest('tr').empty(); (Thanks nnnnnn)
Why not keep it simple and try this: http://jsfiddle.net/H9WL7/
$(function () {
$('#btnDelete').on('click', function () {
$('input[name=foo]').each(function () {
if ($(this).is(":checked")) {
$(this).closest('tr').empty();
}
});
});
});
The obj variable is a reference to the DOM element, it's not a jQuery object. Try this:
$(obj).parents().eq(1).empty();
...to get your existing code working. Or, better:
$(obj).closest('tr').remove();
Note that .empty() doesn't remove the tr element itself, it just removes all of its content, so I suggest .remove().
Demo: http://jsfiddle.net/TWL2E/
Related
I have a table and it contains data with checkboxes in each row. When any of the checkboxes is checked, I add theSelected class to the corresponding tr element.
$('#InventoryTable tbody').on('click', 'input[type="checkbox"]', function (e) { /** logic */ });
But I am facing the issue below, when getting the selected tr element on button click.
This is the code I am using to get the seletced tr values:
function myFunc() {
debugger;
var table = $('#InventoryTable').DataTable();
var adjustmentdetails = new Array();
$("#InventoryTable tr.selected").each(function (ix, element) {
// Do your processing.
debugger;
});
}
However, I am not able to get other page(Pagination) selected values using above code.
just convert this code into function
function clickcheck(e){
{ //logic });
}
and apply this function on your checkbox onclick attr and pass event on this function
Here is one way of doing it, I assume the add class function is working for you, then use a button on click get all element with type=checkbox and it is input element with class selected. then print this value (put your logic here)
$('input[type=checkbox]').on('click', function(e) {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
$('#getAllCheckedValue').on('click', function() {
console.log('----------- getAllCheckedValue ----------------');
$("input.selected[type=checkbox]").each(function(ix, element) {
console.log('Checked-->' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="InventoryTable">
<tbody>
<tr>
1<input type="checkbox" value="1" class="test test2">
</tr>
<tr>
2<input type="checkbox" value="2">
</tr>
<tr>
3<input type="checkbox" value="3">
</tr>
</tbody>
</table>
<button id="getAllCheckedValue">
Get All Checked Value
</button>
I am trying to set an element to have the same value as its sibling in JQuery.
I have a table with a number of fields in, and when I click an Edit button I want to copy the value of a label to it's neighbouring input field:
<table style="width:90%">
<tr>
<td>Start</td>
<td>
<span ID="lblSprintStart" class="staticField">01/01/2001</span>
<input class="editableField" id="sprintStart" />
</td>
</tr>
<tr>
<td>End</td>
<td>
<span ID="lblSprintEnd" class="staticField">02/02/2002</span>
<input class="editableField" id="sprintEnd" />
</td>
</tr>
</table>
<button id="editButton">Edit</button>
I can do it by targeting each individual element by ID:
$(function () {
$("#editButton")
.click(function (event) {
event.preventDefault();
editMode();
});
});
function editMode() {
$("#sprintStart").val($("#sprintStart").siblings(".staticField").html());
}
But I want to do it by class so all fields are updated. If I change the function to use the $(this) selector and do it by class it doesn't work:
function editMode() {
$(".editableField").val($(this).siblings(".staticField").html());
}
http://jsfiddle.net/QQLvX/1/
You can use .val( function(index, value) )
A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.
Code
$(".editableField").val(function(){
return $(this).siblings(".staticField").html();
});
DEMO
Use .each()
$('.editableField').each(function(){
$(this).val($(this).siblings(".staticField").html());
});
I have a table with a checkbox .
I need to know which table rows was checked,
after clicking the Update button.
<div id='ggg' style="position:absolute; bottom:0px" id=>
<table class="display" id="poll">
<th>Polling</th>
<th>rrd</th>
<tr>
<td>ping</td>
<td>10.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked"/>
</td>
</tr>
<tr>
<td>snmp</td>
<td>11.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
</tr>
</table>
<form>
<input type='button' id='update' value='update'>
</form>
</div>
Try this
$('#update').on('click',function(){
$('#poll').find('input:checked').closest('tr').css('background','green');
});
DEMO
You can use :checked selector to get checked checkbox along with .closest(tr) to get row. Try this:
checkedrows = $('input:checked').closest('tr');
Try this
$("#update").click(function () {
$('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});
Demo
Edit
$("#update").click(function () {
$("#poll").find('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});
You can use like this:
if you want to highlight to tr:
$('#update').on('click',function(){
$(':checked').parents('tr').css('background','#ff0');
});
if you want to highlight to td:
$('#update').on('click',function(){
$(':checked').parent().css('background','#ff0');
});
$('#update').click(function() {
var checkboxes = $('#poll').find('input:checked').closest('tr');
// this will give you which table rows was checked
});
i have a table where i am filling some data and have checkboxes besides each and the last check box is "ALL".
When i check this "ALL" checkbox remaining check boxes should be checked and vice versa.
code for filling data.
<div class="tablecontatiner">
<table>
<tr>
<th>Function</th>
<th>Add</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
<th>All</th>
</tr>
#foreach (var item in Model)
{
<tr class="grouprow">
<td><input type="hidden"/><input id="#(item.Func_Code)" type="checkbox" style="visibility:hidden" />#item.FunctionName</td>
<td><input id="#(item.Func_Code + "A")" type="checkbox" value="Add" #(item.Add==true?"checked":"") /></td>
<td><input id="#(item.Func_Code + "E")" type="checkbox" value="Edit" #(item.Edit==true?"checked":"") /></td>
<td><input id="#(item.Func_Code + "V")" type="checkbox" value="View" #(item.View==true?"checked":"")/></td>
<td><input id="#(item.Func_Code + "D")" type="checkbox" value="Delete" #(item.Delete==true?"checked":"")/></td>
<td><input id="#(item.Func_Code + "ALL")" type="checkbox" value="All"/></td>
</tr>
}
</table>
</div>
and my UI looks like :
Try this
$('#checkboxAll').on('change', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
$('table tr input:checkbox:not("#checkboxAll")').on('change', function () {
if (!this.checked) {
$('#checkboxAll').prop('checked', false);
}
});
DEMO
Try
jQuery(function ($) {
//listen to the change of checkbox in the last td
$('.tablecontatiner td:last-child input').on('change', function () {
//update the checked property of all checkboxes in the same row as the changed checkbox
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', this.checked);
})
})
Try,
$('#chkAll').on('click', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
Anton's solution is very elegant.
If you load (or reload) the table and don't want to set the event handlers each time it is reloaded, then I would change a bit the solution:
$('.tablecontatiner').on('change', '[id$=All]', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
Remark: Also I would give "checkboxAll" class to each "ALL" checkbox, so it will look like:
<input id="#(item.Func_Code + "ALL")" type="checkbox" value="All" class="checkboxAll"/>
and then the code above will be:
$('.tablecontatiner').on('change', '.checkboxAll', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
http://jsbin.com/jetewayi/1/edit
I have been using bootstrap tables to fetch data from database using kendo datasource. So in order to make it more interactive i have used a checkbox for simultaneous actions.
I want to delete all the entries with one checkbox. I have read about deleting entries with single checkbox using jQuery. But problem is that I have only one checkbox in table and all the entries are being fetched using kendo data source.
If i am creating confusion then see here-
<script id="template" type="text/x-kendo-template">
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" ></input>
</td></tr>
</script>
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" />
</th>
</tr>
</table>
Now with using kendo datasource i have one column of checkboxes only.
So i am doing this-
<script type="text/javascript">
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
</script>
And still no result. Help!
Try to wrap your jQuery code inside $(document).ready(function(){}); or $(function(){}); to let it see the whole DOM:
$(document).ready(function() {
$('.done').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
});
});
Also, your HTML are wrapped inside the script tag, move it outside and remove redundant ' as well as the input tag doesn't need a closing </input> tag:
<tr>
<td>
<input type="checkbox" class="done" data-id="#= CID #" />
</td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$('.done').click(function (event) {
if ($(this).attr('checked')) {
$('input:checkbox:not(".done")').each(function () {
$(this).attr('checked', 'checked');
});
}
});
});
</script>
Try this. it may works
Try this:
$(function () {
$('.done').on('click', function(){
// i comment this condition if you want selectall for checked or unchecked
//if ($(this).is(':checked')){
$(':checkbox').prop('checked', this.checked);
//}
});
});
Just try this:
Script
$(document).ready(function(){
$('.done').click(function (event) {
$('.chkbxq').each(function () {
$(this).attr('checked', flag);
});
});
});
HTML:
<table>
<tr>
<th style="width:10%;">
<input type="checkbox" class="chkbxq" />
</th>
</tr>
</table>