I have an HTML table as illustrated below. It is generated via PHP from a MySQL database. Using Jquery and JScript, I am able to "check all the rows" or "uncheck all the rows" using the box marked "A".
Example Screenshot picture
What I am trying to achieve is the ability to select all rows in which a specific value (e.g. Female) occurs in a specific column, by checking the appropriate box (e.g. the one marked "B"). Removing the check mark from this Box would remove all the check marks from the "Female" rows.
The ability to do this is important because the actual table contains 3500+ rows.
Try Below.
In my example I sorted only by gender, In order to filter by location and more you can add them in data attribute and modify jquery accordingly
$(function(){
$('input[type="checkbox"]').click(function(){
$('table tr').find('td:eq(0) input[type="checkbox"]').prop('checked', false);
$('div>input[type="checkbox"]').not(this).attr('checked', false)
var gender = $(this).val().toLowerCase();
$('table tr[data-sex="'+gender+'"').find('td:eq(0) input[type="checkbox"]').prop('checked', true);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row col-md-8">
<table class="table table-striped">
<tr>
<td>#</td>
<td>ID</td>
<td>Name</td>
<td>Gender</td>
<td>Location</td>
<td>Hobby</td>
</tr>
<tr data-sex="female">
<td><input type="checkbox" /></td>
<td>1</td>
<td>Ancy</td>
<td>Female</td>
<td>NY</td>
<td>Footbal</td>
</tr>
<tr data-sex="male">
<td><input type="checkbox" /></td>
<td>2</td>
<td>Anto</td>
<td>Male</td>
<td>CA</td>
<td>Chess</td>
</tr>
<tr data-sex="female">
<td><input type="checkbox" /></td>
<td>1</td>
<td>Pamela</td>
<td>Female</td>
<td>NY</td>
<td>Basket Ball</td>
</tr>
<tr data-sex="male">
<td><input type="checkbox" /></td>
<td>1</td>
<td>William</td>
<td>Male</td>
<td>LA</td>
<td>Sleeping</td>
</tr>
<tr data-sex="female">
<td><input type="checkbox" /></td>
<td>1</td>
<td>monica</td>
<td>Female</td>
<td>NY</td>
<td>Eating</td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
<div>
<input type="checkbox" value="Male"> Male
<input type="checkbox" value="Female"> Female
</div>
</div>
OK,
Server side (php) output the markup for the checkbox with:
<input type="checkbox" data-gender="female" />
then client side, when someone ticks the "female" checkbox, do this:
var checkedState = ... //get state to set,
$('.tableClassName input[checkbox]').each(function(index, item) {
var jqItem = $(item);
if(jqItem.data('gender') === 'female') {
jqItem.attr('checked', checkedState);
}
})
Related
I have an html table with a checkbox on each row. My javascrpt filters rows based on a text box above the table. I need a function that will only check the boxes on visible rows. I'm stumped.
chkbuild is the name of all the checkboxes in the table. ID is unique.
chkallnone is my header checkbox to select all or none.
example of table row cell
<td><input type="checkbox" id="(counter)" name="chkbuild" value="(unique ids)"></td>
Javascript code for selecting checkboxes.
function checkCheckboxes( id, pID ){
var ele=document.getElementsByName('chkbuild');
var TrueFalse = true;
//determine if the select all checkbox is checked or unchecked.
if (document.getElementById('chkallnone').checked) {
TrueFalse = true;
} else {
TrueFalse = false;
}
//cycle through all table checkboxes and set their checked value
for(var i=0; i<ele.length; i++){
ele[i].checked=TrueFalse;
}
}
Comments added 08/23/2022
My table row has <tr data-link="filename.php" data-target="_SELF"> and the javascript has this function which live filters the table.
$("table tr").click(function(e) {
var u = $(this).data("link");
var t = $(this).data("target");
console.log(u, t);
if (t.length) {
window.open(u, t);
} else {
window.location.href = u;
}
});
I have added som emarkup that seems to fit part of your description. The following snippet works in the way that it
checks/unchecks all the table chekckboxes with [name=chkbuild]
window.open()s new windows for all <tr>s with the appropriate data tags set.
The target "_SELF" will of course open the new page in the original location, leading to a white page, while all other data-target values will not work here in SO because of sandbox restrictions.
// check/unchek all target checkboxes:
document.getElementById("chkallnone").onclick=ev=>
document.querySelectorAll("table [name=chkbuild]")
.forEach(c=>c.checked=ev.target.checked);
// add click event handler on filtered TRs:
document.querySelector("table").onclick=ev=>{
const tr=ev.target.closest("tr"); // tr = closest TR parent element
if (tr.dataset.link>"") {
console.log(`redirecting to ${tr.dataset.link} in target window ${tr.dataset.target}`)
window.open(tr.dataset.link,tr.dataset.target);
}
}
<label><input type="checkbox" id="chkallnone"> all checkboxes</label>
<table>
<thed>
<tr>
<th>this is the first column</th>
<th>and this is the second one</th>
</tr>
</thead>
<tbody>
<tr data-link="filename1.php" data-target="win1">
<td>data</td>
<td>link1</td>
</tr>
<tr data-link="filename2.php" data-target="_SELF">
<td>data</td>
<td>link2 - target self!</td>
</tr>
<tr>
<td><input type="checkbox" id="cb1" name="chkbuild" value="1"></td>
<td>checkbox 1</td>
</tr>
<tr data-link="filename3.php" data-target="win3">
<td>data</td>
<td>link3</td>
</tr>
<tr>
<td>no data</td>
<td>and no link</td>
</tr>
<tr>
<td><input type="checkbox" id="cb2" name="chkbuild" value="1"></td>
<td>checkbox 2</td>
</tr>
<tr>
<td><input type="checkbox" id="cb3" name="chkbuild" value="3"></td>
<td>checkbox 3</td>
</tr>
<tr data-link="filename5.php" data-target="win5">
<td>data</td>
<td>link5</td>
</tr>
<tr>
<td><input type="checkbox" id="cb4" name="chkbuild" value="4"></td>
<td>checkbox 4</td>
</tr>
<tr>
<td><input type="checkbox" id="cb6" name="other" value="6"> other</td>
<td>checkbox 6</td>
</tr>
<tr data-link="filename6.php" data-target="_SELF">
<td>data</td>
<td>link6 - target self!</td>
</tr>
<tr data-link="filename7.php" data-target="win7">
<td>data</td>
<td>link7</td>
</tr>
<tr>
<td><input type="checkbox" id="cb5" name="chkbuild" value="5"></td>
<td>checkbox 5</td>
</tr>
</tbody>
</table>
Please note that the "other" checkbox with the text "checkbox 6" behind it is unaffected from clicks on #chkallnone. This is by design as its name is not chkbuild.
I'm not sure why this jquery is not working. What I want is pretty straightforward: selecting all check boxes under the region. Could someone help tell why it's not working?
$(function(){
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).next('tbody').find('.region_ct');
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false); }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
...
</table>
There are a couple of issues there:
I would strongly recommend against intermixing tr and tbody elements. If you're going to use tbody (and you should), use it consistently. Browsers may relocate tr elements into generated tbody elements.
The element you're calling next on doesn't have a following sibling (at all, much less the one you're looking for). You have to traverse up the hierarchy to the tr (if you don't fix #1) or the tbody (if you do).
You don't use attr to set checked, you use prop; and you can use your existing checked boolean rather than if/else, giving is simply checkboxes.prop("checked", this.checked);
Example with updated tbodys, and I've added some countries in the Asia area to demonstrate that only the relevant checkboxes are checked:
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).closest('tbody').next().find('.region_ct');
checkboxes.prop("checked", this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />China</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Vietnam</td>
<td class="center"></td>
</tr>
</tbody>
</table>
You might also consider putting the select_all inside the same tbody with the checkboxes, so you could do away with next.
tbody isn't sibing of .select_all. You need to use .closest() to select parent of .select_all and use .find() to select .region_ct in it. Also you don't need to use if/else to check/uncheck checkbox. Only set this.checked to checked attribute of checkbox using .prop().
$('.select_all').change(function() {
$(this).closest('table').find('.region_ct').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
</table>
I write a demo on JSFIDDLE, please see demo.
HTML:
<table id = 't'>
<thead>
<tr >
<td><input class='Flag' type="checkbox" id="mq"/></td>
<td>firstname</td>
<td>secondname</td>
<td>lastname</td>
</tr>
</thead>
<tbody>
<tr >
<td><input class='Flag' type="checkbox" id="1"/></td>
<td>lorem</td>
<td>ipsum</td>
<td>css</td>
</tr>
<tr >
<td><input class='Flag' type="checkbox" id="2"/></td>
<td>lorem</td>
<td>ipsum</td>
<td>css</td>
</tr>
<tr >
<td><input class='Flag' type="checkbox" id="3"/></td>
<td>lorem</td>
<td>ipsum</td>
<td>css</td>
</tr>
<tr >
<td><input class='Flag' type="checkbox" id="4"/></td>
<td>lorem</td>
<td>ipsum</td>
<td>css</td>
</tr>
<tr >
<td><input class='Flag' type="checkbox" id="5"/></td>
<td>lorem</td>
<td>ipsum</td>
<td>css</td>
</tr>
</tbody>
CSS:
tr,td{border:1px solid black;}
JS:
$("tbody input").click(function(){
var closestTr = $(':checkbox:checked').closest('input').attr('id');
alert(closestTr);});
In demo I want to alert id number of each line when user clicks on checkbox. For example: when you click checkbox on line 2, browser alerts 2 and when you click checkbox on line 3, browser then alerts 3. But I didn't implement this in demo. Please give me some advice.
http://jsfiddle.net/0wz3h1vc/
You want to specifically get the checkbox id and there aren't any others, so you can technically scrap the "tbody" in your event code. Then display the id by grabbing the attribute "id" and throwing it in the variable
Edit: to explain more thoroughly, because the click on THIS element is causing the event, you can specify $(this) in jQuery to select the element and pull it's id by using the attribute method .attr(attribute)
$("input").click(function(){
var closestTr = $(this).attr("id");
alert(closestTr);});
I need to check/uncheck a checkbox that exist inside a row under table body when it is clicked anywhere within a row except a link. I tried to make it working by using jQuery's prop, but something is not working properly.
I have a table structure like below:
<table id="anywhere_click">
<thead>
<tr>
<th><input type="checkbox" onclick="selectAll('myDataID[]');" /></th>
<th>Title</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="myDataID[]" value="1" /></td>
<td>Stackoverflow</td>
<td>Some text here....</td>
</tr>
<tr>
<td><input type="checkbox" name="myDataID[]" value="2" /></td>
<td>Google</td>
<td>
This is a Link<br />
Some text here....<br />
<img src="something.jpg" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="myDataID[]" value="3" /></td>
<td>test</td>
<td>Some text here....</td>
</tr>
</tbody>
</table>
$('#anywhere_click tbody tr').click(function (e) {
if(!$(e.target).is('#anywhere_click td input:checkbox'))
$(this).find('input:checkbox').trigger('click');
});
$('#anywhere_click tr a').click(function (e) {
e.stopPropagation();
});
If you checked when the site 's loading.
You have to add in the tag <td><input type="checkbox" name="myDataID[]" value="3" /></td>
checked.
<td><input type="checkbox" name="myDataID[]" value="3" checked /></td>
With the button you want checked and unchecked.
Info: Information
and example: Examble with button checked and unchecked
I need to implement the following functionality in JavaScript/jQuery and its driving me nutts. I have an idea how I can implement this using lots of ids. However, I need to implement this using classes because these will be dynamic and it doesn't make sense to have a different id for every row.
Take the following table as an example:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK</span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
if the checkbox of John Doe is checked, I need to show the CHANGE span for the respective clicked checkbox. Therefore, I need to add this element using jQuery. The following will be the result:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK</span> <span class="defaultLocation">Change</span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
if the CHANGE span is clicked, I need to show the textbox for respective checkbox clicked. The following table will be the result:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK <input type="text" /></span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
If the John Doe checkbox is unchecked, the respective row is reverted back without the textbox and without the change span, like the first table
If more than one checkbox is clicked, the second, third and so on rows need to follow the same procedure without losing the functionality from previously clicked checkboxes.
If the CheckAll checkbox is clicked from the table header, then all rows must follow the procedure mentioned above.
I need to hear your opinions on the best practices on how to achieve this. I know the logic of it but I can't manage to program it with JavaScript and jQuery. For instance, with jQuery, when you store an element in a string so you can manipulate it with plain JavaScript, then you don't have simple access anymore to the DOM.
Any help would be greatly appreciated
Try this:
$(".myClass").click(function(){
if(this.checked){
var changeElement = getChangeElement()
$(this).parents('tr').children('.changable').append($(changeElement))
attachEventsToCHANGE()
}else{
$(this).parents('tr').children('.changable .defaultLocation').remove()
}
})
function getChangeElement(){
var changeElement= $("<span class='defaultLocation'>Change</span>")
$(changeElement).click(function(){
$(this).after("<input type='text' />")
$(this).remove()
})
return changeElement;
}
I havent tested it but I think it would help you!!
You could probably bind to the "changed" Event of all checkboxes. Within the Eventhandler you could probably do something along the lines of
function changeHandler(event) {
if ($(this).val('checked') == checked) {
$(this).parents('tr').children('.changeable').append('<span>bla<span>');
} else {
$(this).parents('tr').children('.defaultLocation').remove();
}
The click handler of the "Change" Span should be pretty straight forward.