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.
Related
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 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);
}
})
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
is there any reason why these table checkboxes would return a '1' or true statement whether they are checked or not?
<table>
<tr>
<td>Lake/Body Name:</td>
<td><input type="text" id="title"></td>
</tr>
<tr>
<td>Fishing:</td>
<td><input type="checkbox" value="1" id="fish"></td>
</tr>
<tr>
<td>Wakeboarding:</td>
<td><input type="checkbox" value="1" id="wake"></td>
</tr>
<tr>
<td>Skiing:</td>
<td><input type="checkbox" value="1" id="ski"></td>
</tr>
<tr>
<td>Tubing:</td>
<td><input type="checkbox" value="1" id="tube"></td>
</tr>
<tr>
<td>Comments:</td>
<td><input type="text" id="comments"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Save & Close" onclick="saveBoat()"></td>
</tr>
</table>
This is a content VAR for a google maps infowindow, BTW...
It depends on what Javascript you are using to check for it being "checked". Using .value on a checkbox element is not the same as using the .checked property. If you see, you are setting the value attribute for the checkbox elements in the HTML as 1. As I said before, this is unrelated to its checked state and is accessed differently.
I have several tables which looks like these below:
<table id="table1">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</a></td>
<td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
<td>Item 2</a></td>
<td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>$total </td>
</tr>
</table>
<table id="table2">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</a></td>
<td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
<td>Item 2</a></td>
<td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
<td>Item 4</td>
<td><input type="text" name="sum4" id="sum4" /></td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>$total</td>
</tr>
</table>
Does anybody know if there is a possibility to sum item prices for each input (seperately for table1, table2, etc..)
And at the end print sum of items from all items?
You'll need a dom manipulator like jQuery or simply javascript. I'd give the fields a class to make it even easier--say, "sum". Then you can grab all the children "sum"s from the parent tables. Parse their value to an int and add. Not too bad.
Here's a working JS fiddle example
Better way is not to call different elements with similar IDs, it's invalid way. But even if so - you can perform calculations for every table simply working with inputs in this table.
Algorithm:
You run loop for all <table> tags.
For every <table> tag you find all <input>s (no matter what IDs they have);
Calculate total sum for all inputs for current table.
You can do this with JavaScript but better for you is jQuery.
BUT: don't call HTML DOM elements with similar IDs. It's wrong!!!
this should be pretty easy with jquery, assuming you can add a class name called "line-item" or something to each input and a class name "total" to the cell which should display calculated sum, you can do
function calculateSum(tableId){
var sum = 0;
$(tableId + ' .line-item').each(function(){
var value = parseFloat($(this).val().trim());
if(value){
sum += parseFloat($(this).val());
}
});
$(tableId + ' .total').html(sum);
}
and invoke this function with the id of the table for which you want.
If you cannot add a class name, this don't get tuffer even a single bit, but instead of .line-item try to put just input, it should do the trick in this scenario. Instead of .total you can write tr:last-child td:nth-child(2)
UPDATE: added "parseInt" to avoid string concatenation