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)
Related
I am displaying data in a table like this:
name country place number
ashwin India delhi 123
sita India Ajmer 456
and so on.
I want to add checkboxes on hover to a column and allow the user to be able to select multiple values for that column. For instance, the user can select delhi and ajmer or just delhi.
Please help with some jquery or javascript code for this?
Try this -
HTML -
<table border="1" id="demo">
<tr>
<th>name</th>
<th>country</th>
<th>place</th>
<th>number</th>
<th>check</th>
</tr>
<tr>
<td > ashwin </td>
<td> India </td>
<td> delhi </td>
<td> 123</td>
<td><input type="checkbox" id="chk1" style="display:none"></td>
</tr>
<tr>
<td > sita </td>
<td> India </td>
<td> Ajmer </td>
<td> 456</td>
<td> <input type="checkbox" id="chk2" style="display:none"></td>
</tr>
<tr >
<td > sita </td>
<td> India </td>
<td> Ajmer </td>
<td> 456</td>
<td> <input type="checkbox" id="chk2" style="display:none"></td>
</tr>
</table>
JS -
$(document).ready(function(){
$("#demo tr").mouseover(function() {
$(this).find("input[type='checkbox']").show();
});
$("#demo tr").mouseout(function(){
var checkbox = $(this).find("input[type='checkbox']");
if (!checkbox.is(':checked')) {
$(this).find("input[type='checkbox']").hide();
}
});
});
JSFiddle link - https://jsfiddle.net/Lvbj2dmm/10/
<!DOCTYPE html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#one").mouseover(function(){
$("#chk1").show();
});
$("#two").mouseover(function(){
$("#chk2").show();
});
$("#one").mouseout(function(){
if (document.getElementById('chk1').checked) {
$("#chk1").show();
}
else{
$("#chk1").hide();
}
});
$("#two").mouseout(function(){
if (document.getElementById('chk2').checked) {
$("#chk2").show();
}
else{
$("#chk2").hide();
}
});
});
</script>
</head>
<table border="1">
<tr>
<th>name</th>
<th>country</th>
<th>place</th>
<th>number</th>
<th>check</th>
</tr>
<tr id="one"> <!--put id as primary number from db -->
<td > ashwin </td>
<td> India </td>
<td> delhi </td>
<td> 123</td>
<td><input type="checkbox" id="chk1" style="display:none"></td> <!--here but use tr id_chk -->
</tr>
<tr id="two"> <!--put id as primary number from db -->
<td > sita </td>
<td> India </td>
<td> Ajmer </td>
<td> 456</td>
<td> <input type="checkbox" id="chk2" style="display:none"></td><!--here but use tr id_chk -->
</tr>
</table>
</html>
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'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);
}
}
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/
I have a table
<table id="t">
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
</table>
i want to replace "abc"(in td) with "abc" as in the following
<table id="t">
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
</table>
i googled for the solution but didn't find any.
Thanks in advance.
You can do:
$('td').html(function(i, html){
return html.replace(/abc/g, '<span class="c2">abc</span>');
});
This goes through each <td>, looks at its text, then replaces every occurrence of abc with abc wrapped in the span you want.
Something like:
$('td').each(function () {
$(this).html($(this).html().replace('abc', '<span class="c2">abc</span>'));
});
http://jsfiddle.net/Ru8XX/
Try this:
$('#t td').each(function(){
$(this).html( $(this).html().replace("abc","<span class='c2'>abc</span>") );
});