How to hide table row has unchecked input using jquery - javascript

I'm trying to do a filter that when a button pressed it will show only the row has checked input in the table.
<table class="table">
<tr>
<th>Name</th>
<th>InUse</th>
<th></th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
<tr/>
<!-- not checked -->
<tr>
<td>foo 3</td>
<td>
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>


You can use :has selector or .has() method to checking existence of element in parent.
$("button").click(function(){
$("table tr").has(".check-box:not(:checked)").hide();
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>InUse</th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input class="check-box" type="checkbox" checked disabled />
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input class="check-box" type="checkbox" disabled />
</td>
</tr>
<tr>
<td>foo 3</td>
<td>
<input class="check-box" type="checkbox" checked disabled />
</td>
</tr>
<tr>
<td>foo 4</td>
<td>
<input class="check-box" type="checkbox" disabled />
</td>
</tr>
</table>
<button>Only checked</button>
You can test code on full of you html in demo


Please use following jquery code. Onclick of submit button all the rows with unchecked checkboxes will be hide.
$(document).ready(function(){
$("input[type=submit]").click(function () {
$("input:not(:checked)").each(function () {
$(this).closest('tr').hide();
});
});
});


Please use jquery and place this code in your tag
$(document).ready(function () {
$("#btnClick").on("click", function () {
$(".table tr").each(function () {
if (!$(this).find("td input:checkbox").is(":checked")) {
$(this).hide();
}
})
})
});
This should work with your case.


This is a much simpler approach. Pass this to the onclick() event handler in your HTML and use jQuery:
<input type="checkbox" onClick="disablerow(this);">
function disablerow(el) {
if (el.checked == true) {
$(el).closest('tr').find(":input:text(:first)").attr('disabled', false);
}
else {
$(el).closest('tr').find(":input:text(:first)").attr('disabled', true);
}
}

Related

Table - Hide one element, show another

I'm new to JavaScript and I have an issue.
I need to hide checkbox and then show the span with the content "canceled".
Can someone help me, please?
$(document).ready(function() {
// Find remove selected table rows
$(".delete-row").click(function() {
$('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
if (confirm("Are you sure?")) {
$(this).hide();
$(this).closest('td').find('.canceled').show();
console.log("confirmed");
} else {
console.log("canceled the deletion");
}
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>
<input type="checkbox" name="record">
<span class="canceled" style="visibility: hidden">Canceled</span>
</td>
</tr>
<br />
<tr>
<td>First Name 2</td>
<td>Last Name 2 </td>
<td>Address 2</td>
<td>
<input type="checkbox" name="record">
<span class="canceled" style="visibility: hidden">Canceled</span>
</td>
</tr>
<button type="button" class="btn btn-danger marginLeft20 delete-row">Cancel</button>

Based on the code you provided, the alert is showing two times when you cancel for the second checkbox, this is because the first checkbox is hidden but not unchecked and the each loop condition checks for the checked checkbox. Thus, you can uncheck the checkbox together with hiding it.
$(document).ready(function() {
// Find remove selected table rows
$(".delete-row").click(function() {
$('input[name="record"]').each(function() {
if ($(this).is(":checked")) {
$(this).prop('checked', false);
if (confirm("Are you sure?")) {
$(this).hide();
$(this).siblings('.canceled').css('visibility', 'visible');
console.log("confirmed");
} else {
console.log("canceled the deletion");
}
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>
<input type="checkbox" name="record">
<span class="canceled" style="visibility: hidden">Canceled</span>
</td>
</tr>
<br />
<tr>
<td>First Name 2</td>
<td>Last Name 2 </td>
<td>Address 2</td>
<td>
<input type="checkbox" name="record">
<span class="canceled" style="visibility: hidden">Canceled</span>
</td>
</tr>
</table>
<button type="button" class="btn btn-danger marginLeft20 delete-row">Cancel</button>

on checkbox click
$(this).hide();
$('span:contains("canceled")').show();

Select all checkboxes under tbody not working

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>

JQuery datatable link onclick event

I have a jquery datatable that contains multiple columns and rows as below.
<table>
<thead>
<tr>
<td>Name</td>
<td>Class</td>
<td>Action</td>
<td>Score</td>
<td>Corrected Score</td>
</tr>
</thead>
<tbody>
<tr>
<td>Student1</td>
<td>Math</td>
<td>Add 5
</td>
<td>73</td>
<td>
<input type="text" id="1_final_score" />
</td>
</tr>
<tr>
<td>Student2</td>
<td>Biology</td>
<td>Add 5
</td>
<td>84</td>
<td>
<input type="text" id="2_final_score" />
</td>
</tr>
<tr>
<td>Student3</td>
<td>History</td>
<td>Add 5
</td>
<td>50</td>
<td>
<input type="text" id="3_final_score" />
</td>
</tr>
</tbody>
When i click on the "Add 5" link, I want to add 5 to the score in the corresponding row and insert the result in the final score input field. I have tried using the jquery row-select feature, but am unable to figure out how to accomplish the above.

$(document).ready(function () {
$('table').find('a').click(function () {
var original = parseInt($(this).parents('tr').find('td:nth-child(4)').text()) + 5;
$(this).parents('tr').find('input[type=text]').val(original);
});
});

You can try this:
$(document).ready(function(){
$("a").on("click", function(){
var num=parseInt($(this).closest("td").next("td").text());
num=num+5;
$(this).closest("td").next("td").text(num);
$(this).closest("tr").find("input").val(num);
});
});
FIDDLE

Try with this
$('a:contains("Add 5")').click(function(){
$(this).parents('tr').find('td input:text').val(+$(this).parent().next('td').text() + 5 )
});
FIddle : http://jsfiddle.net/2n0bevxo/172/

On Radio Select, show different checkbox selection

I'm looking for a Javascript or jQuery solution, either works.
Anyway, when a user selects one of the choices for the radio buttons, I want a different set of checkboxes to show up. So, if a user chooses By Name, the name checkboxes will show up. And then when the user chooses By Title, the name checkboxes will disappear and the title checkboxes will show up.
When a page loads, and an option is not chosen, no checkboxes should appear
Here is what the HTML looks like:
<table>
<tr>
<td><input type="radio" name="selectType" value="byName" />By Name</td>
<td><input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectName1" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="selectTitle2" />Title 2</td>
</tr>
</table>
What would this code look like?

I would use data attributes to reference groups of checkboxes. This way you can make your code really flexible and unobtrusive:
$('.type-check').change(function() {
$('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});
HTML sample:
<tr>
<td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
<td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>
http://jsfiddle.net/D8s9G/

First give your checkboxes classes..
<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2
do the same for titles and give them a class name of 'title' and for your radios too..
<input type="radio" name="selectType" value="byName" class="radioName" />
then;
$(document).ready(function () {
$('.radioName').click(function () {
$('.name').show();
$('.title').hide();
});
//same logic for titles..
});

Here is a working solution - http://jsfiddle.net/FloydPink/fkvSg/
jQuery:
$('.name').closest('tr').toggle(false);
$('.title').closest('tr').toggle(false);
$('input[name=selectType]').change(function () {
var byNameSelected = $(this).val() == 'byName';
$('.name').closest('tr').toggle(byNameSelected);
$('.title').closest('tr').toggle(!byNameSelected);
});
HTML:
<table>
<tr>
<td>
<input type="radio" name="selectType" value="byName" />By Name</td>
<td>
<input type="radio" name="selectType" value="byTitle" />By Title</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName1" />Name 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="name" name="selectName2" />Name 2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle1" />Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="title" name="selectTitle2" />Title 2</td>
</tr>
</table>
I have added css classes to all the four checkboxes, so that the group of 'Name' and 'Title' checkboxes could be grouped.

You can select the inputs with their name and show or hide the relevant inputs:
$('input[value*="byName"]').click( function() {
$('input[name*="selectName1"]').show();
$('input[name*="selectTitle1"]').hide();
}
$('input[value*="byTitle"]').click( function() {
$('input[name*="selectName1"]').hide();
$('input[name*="selectTitle1"]').show();
}

Failing applying jquery slice method over siblings tr (table rows)

The following code it is auto-explained:
HTML:
<table cellspacing="1" class="CRMP_WP_QUICKADS_PLUGIN">
<tr id="CRMP_WP_QUICKADS_tr_in_content">
<td>
<table>
<tr>
<td>
<input type="radio" name="in_content" value="1">
</td>
<td>
Enabled
</td>
</tr>
<tr>
<td>
<input type="radio" name="in_content" value="0">
</td>
<td>
Disabled
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">
Hover Ads
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</table>
javascript:
$("input[name='in_content']").click(function(){
if ($(this).val()){
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).show();
} else{
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).hide();
}
});
The hide/show effect is not running.-

Does this work?
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll()
.slice(0,6)
.each(function(index, element) {
element.hide();
});

// is not enough:
if ($(this).val())
// it must be:
if ($(this).val() == 1)

Categories

Resources