jQuery/Javascript: Check all checkboxes on the following table - javascript

My original javascript was:
$(document).ready(function(){
$("th :checkbox").change(function() {
$(this).closest("table").find(":checkbox").prop("checked", $(this).is(":checked"));
});
});
which was used on a setting like this:
<div>
<table id="table" width="100%">
<tr>
<th><input type="checkbox" />Select All</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
</div>
I slightly changed how my tables were and it now goes something like:
<table>
<tr>
<th><input type="checkbox" />select all</th>
</tr>
</table>
<table>
<tr>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
</tr>
</table>
What do I need to change in my javascript so that when the checkbox in <th> is checked, all the checkboxes inside the <td>'s in the next table are checked?
Thanks.
Related to this post.

Add .next() to .closest("table"):
$(document).ready(function(){
$("th :checkbox").change(function() {
$(this).closest("table").next().find(":checkbox").prop("checked", $(this).is(":checked"));
});
});
$(this).closest("table") selects the table of the element matching th :checkbox. next() selects the next element, which is another table, in this case.
This code can break easily. I suggest to set an ID to the other table, and use the following code:
$(document).ready(function(){
$("th :checkbox").change(function() {
$("#id-of-table :checkbox").prop("checked", $(this).is(":checked"));
});
});

Related

I want to get the value of checkbox using jQuery

In a table there are multiple rows, what I want is if I click on a particular name of user like "Sam" and "Adem" I want to get the value of checkbox which only relates to that row.
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Username</td>
<td>Rank</td>
<td>Address</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id="" value="1"></td>
<td>Sam</td>
<td>Sam001</td>
<td>Admin</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" value="2"></td>
<td>Adem</td>
<td>Adem002</td>
<td>Manager</td>
<td>ZYZ</td>
</tr>
<tr></tr>
<tr></tr>
Attach click event on TD elements. In the handler find the checkbox using .parent() and .find() methods. When you have found the checkbox, get its value using .val() method.

jquery automatically check checkbox with values in array

I have a table like so
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
I have a jquery array where there some ids stored of those rows example
id= [123,431,213]
what I want is when my page loads the ids which are inside the array to be already checked
$(document).ready(function () {
//code
});
I do not know how to go about this any help would be helpful
Iterate over each row in the table body and for each take the text value of the first cell and check to see if your array includes it.
const arr = [ 431, 123, 888 ];
// Iterate over the rows
$('tbody tr').each((i, el) => {
// Grab the first cell's text and coerce it to a number
const number = Number($(el).find('td').first().text());
// If the value is in the array
if (arr.includes(number)) {
// Find the input and check it
$(el).find('input[type="checkbox"]').prop('checked', 'checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>124</td>
<td>Bob</td>
<td>23</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
var ids = ['431', '132'];
$( document ).ready(function() {
$('td.id').each(function( index ) {
if (ids.includes($(this).text())){
$( "input.checkboxes" ).eq( index ).prop( "checked", true );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td class="id">123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>

How to set background color for each column in table?

I have a table with four columns and two rows, 4th column have a button for each rows, now I want to change the background color in the second column of second row while click the button for each rows. Please let me know how to do this.
Here I have placed my code for your reference.
$(function(){
$('input').click(function(){
$('table').find('tr td:eq(1)').css('background-color', 'red');
});
});
HTML
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td><input type="button" value="button"></input></td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td><input type="button" value="button"></input></td>
</tr>
</table>
Find the tr containing the button using closest(), then find the second column using that
$(function() {
$('input').click(function() {
$(this).closest('tr').find('td:eq(1)').css('background-color', 'red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td>
<input type="button" value="button"></input>
</td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td>
<input type="button" value="button"></input>
</td>
</tr>
</table>
You don't need to use a heavy JavaScript / jQuery for this case. Instead you can use <col>:
<table border="1" style="border-collapse:collapse;">
<col style="background-color: #f00;" />
<col style="background-color: #0f0;" />
<col style="background-color: #00f;" />
<col style="" />
<tr>
<td>1</td>
<td>jai</td>
<td>description</td>
<td><input type="button" value="button" /></td>
</tr>
<tr>
<td>2</td>
<td>sul</td>
<td>description</td>
<td><input type="button" value="button" /></td>
</tr>
</table>
Also note that you don't have </input> which might fail some code (eg. syntax highlighters).
Try this,
If you are aware of parent() in jquery then you can also try this,
$(function() {
$('input').click(function() {
$(this).parent().parent().find('td:eq(1)').css('background-color', 'red');
});
});
" $(this).parent().parent().find('td:eq(1)') " In this line of js, it will move to its parent tag twice, means $(this) is clicked input control and from that it will move to its parent tag twice to reach to its tag and from that position it will find the td at position 1. From here onwards you can do your color changing operation like shown in above js code.

Get nested table id by searching td text

HI i want to get nested table id based on text search.Please help me on this.
i want to get id="nested1" by searching text "PCI Date".
<table>
<tbody>
<tr>
<td>
<table id="nested1">
<tbody>
<tr>
<td><span>PCI Date</span></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id="nested2">
<tr>
<td><span>New text</span></td>
<td><input type="text" /></td>
</tr>
</table>
</td>
</tr>
</table>
Try using contains() & parents()
var id = $('span:contains("PCI Date")').parents('table').attr('id');
alert(id);
Reference:
contains()
parents()

Delete checkbox that has an 'inactive' status

I have an html table shown below:
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall" /></th>
<th colspan="2">Status</th>
<th class="data-name">UserName</th>
<th class="data-name">Description</th>
</thead>
</table>
The Status uses a text to indicate active and inactive users. Here I'm trying to display an error msg if anyone tries to delete the checkbox that has status as 'active'. Only 'inactive' users can be deleted.
I'm looking for a jquery code for that. can someone help me?
I'm providing a sudo code of what i'm trying to achieve. this might not be syntactically correct.
if $('#selectall input[type="checkbox"]:checked') is 'active'
{
alert('do not delete the checkbox');
}
else
{
alert('delete the checkbox');
}
this might do it
if ($('#selectall input[type="checkbox"]:checked').size() > 0)
{
alert('do not delete the checkbox');
}
else
{
alert('delete the checkbox');
}
i developed his next code in javascript and html
http://jsfiddle.net/jHpKB/1/
I hope you help
(My english is bad sorry)
html
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall" /></th>
<th colspan="2">Status</th>
<th class="data-name">UserName</th>
<th class="data-name">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" data-user-id="1" data-status="active" /></td>
<td>Active</td>
<td>User 1</td>
<td>None</td>
</tr>
<tr>
<td><input type="checkbox" data-user-id="1" data-status="inactive" /></td>
<td>Inactive</td>
<td>User 1</td>
<td>None</td>
</tr>
</tbody>
</table>
Javascript
$(document).ready(function(){
$("#selectall").on("click", function(){
var checked = $(this).is(":checked");
$("input[type='checkbox'][data-status='inactive']").attr("checked", checked )
});
});

Categories