<table id="linkedin_match">
<tr>
<th>Name</th>
<th>Location</th>
<th>Industry</th>
<th>Company</th>
<th>Position</th>
<th> </th>
<th> </th>
</tr>
<tr>
<td>Moses Gonzales</td>
<td>Greater Seattle Area</td>
<td>Chemicals</td>
<td>Superior Grocers</td>
<td>WC Claim Manager</td>
<td>Invite</td>
<td><input type="checkbox" id="match"/></td>
</tr>
<tr>
<td>Moses Gonzales</td>
<td>Greater Seattle Area</td>
<td>Chemicals</td>
<td>Superior Grocers</td>
<td>WC Claim Manager</td>
<td>Invite</td>
<td><input type="checkbox" id="match"/></td>
</tr>
</table>
With the table above, how would I perform the logic, such that if the checkbox is selected, the other rows will hide? The rows are not limited to just two. It could be five, it could be ten, it can be just one. Currently my code is :
$('document').ready(function() {
var tr = $('#linkedin_match tr');
});
Now I don't know what to do with the tr. I'm kinda new to JS too. Thanks.
You can do this way. ids must be unique so change match as class name.
$(document).ready(function() {
$('#linkedin_match .match').change(function(){ //bind change event to the checkboxes
var $this = $(this);
$('#linkedin_match').find('tr:gt(0)').not($this.closest('tr')).toggle();
//since all trs are visible you can use toggle to toggle all the trs but not the one that is a parent of this.
//And un checking will bring all of them back to visible state.
});
});
Fiddle
if you have no control over changing the id to class or add a class, then you can target the checkbox
$('#linkedin_match :checkbox').change(function(){...});
gt(0) - To select the rows with index greater than 0. i.e to avoid the first one.
closest('tr') - To get the parent tr of the checked element.
not($this.closest('tr')) - To add a filter. i.e to exclude the current row.
toggle() - To toggle the element's state.
Add a checkbox
<input type="checkbox" class="check"> Check me
then invoke jquery toggle
$('.check').click(function(){
$('td.hide').toggle();
});
Fiddle: http://jsfiddle.net/webbymatt/DLxjR/
P.s. in my example I have put a class on the cell I want to hide, this could also be applied to entire rows. In this case:
<td class="hide">WC Claim Manager</td>
First off you shouldn't have two elements with the same id. change those to classes and you could do the following:
$(document).on('click', '.match', function(){
if ($(this).is(':checked')) {
$('.match').closest('tr').hide();
$(this).closest('tr').show();
} else { $('.match').closest('tr').show(); }
});
This solution will show all rows with a checkbox when a box is unchecked, and only show the relevant row when the checkbox is checked.
Related
I have one small problem with my JQuery Code.
I created simple table in HTML.
<table class="table">
<tr>
<th>Name</th>
<th>Surname</th>
<th></th>
</tr>
<tr>
<td>name 1</td>
<td>surname 1</td>
<td>actions</td>
</tr>
<tr>
<td>name 2</td>
<td>surname 3</td>
<td>actions</td>
</tr>
</table>
Then I want to highlight the row in yellow, when I click on this row
So when I am click on row add class "selected" but when I click on another row I have to remove "selected" class from previous row. So I tried create JQuery action
$('tr').not(':first').click(function () {
var table = $(this).closest("table");
var rows = table.children("tr");
alert(rows.length);
rows.each(function () {
$(this).removeClass("selected");
});
$(this).addClass('selected');
});
I tried find closest table from this clicked row and get all children <tr>,
next in loop remove "selected" class and add to clicked row this class.
But always alert(rows.length) return me 0 rows :<
Please help me.
Thanks.
why not simply
$('tr').not(':first').click(function () {
$(this).addClass("selected"); //add class selected to current clicked row
$(this).siblings().removeClass( "selected" ); //remove class selected from rest of the rows
});
First remove class from the selected one, then add the class to the new one.
$('tr').not(':first').click(function () {
$('tr.selected').removeClass("selected");
$(this).addClass('selected');
});
Write this:
$('.table tr').not(':first').on('click', function(){
$('.table tr').removeClass('selected');
$(this).addClass('selected');
});
As per your question, write like this:
var rows = $(this).siblings("tr");
Instead of:
var rows = table.siblings("tr");
For the following table:
<table id="a_grid">
<tr id="a_row">
<td>Choice A<input type="checkbox" id="a_box" class="box"></td>
<td>Reason:<input type="text" id="a_text" class="reason"></td>
</tr>
<tr id="b_row">
<td>Choice B<input type="checkbox" id="b_box" class="box"></td>
<td>Reason:<input type="text" id="b_text" class="reason"></td>
</tr>
</table>
I am trying to make it work such that when you click the checkbox, it toggles a 'control' class to its corresponding text box that has a specific color. Trying to identify by classes so I can scale the table.
What I've tried:
$(".box").change(function () {
$(".reason").toggleClass("control", false);
});
Your currently targeting all checkboxes with .reason, whereas you need to use the context that comes with the event, I.E. the checkbox itself. From there you can traverse up to the row, and down to the input.
.toggleClass() will always remove the class, because you pass false as the second parameter. You can then toggle the class based on the checkbox, using the .checked property:
$('.box').change(function(){
var $this = $(this);
$this.closest('tr').find('.reason')
.toggleClass('control', $this.prop('checked'));
});
JSFiddle
Scenario:
I'm using datatable library to display alot of information. That table have the following rows:
Id Type Name Case
What I'm looking for is that when I click the second row Type, that value will be taking and pasted in a textbox
Example
Id Type Name Case
1 text Juan 20001
3 List Pedro 20005
If I click the row that has the id # 1, I need to take the Type innerHTML. Does not matter what apart of the row I click just take the second td's html.
I tried with this code:
$("tr td").click(function () {
alert($(this).html());
})
It worked great, But the problem is that the user have to click exactly the row Name, but would be better if user can click over any of the row and just take the second rows html.
Suggesstions?
myRow.getElementsByClassName('td')[1].innerHTML
should get you the innerHTML of the second table cell of myRow as long as the first table cell does not contain a nested table.
You might try adding the click handler to the rows instead of to the cells too.
Try using eq()
but would be better if user can click over any of the row and just
take the second rows html.
$("tr td").click(function () {
secondrow = $(this).closest('tr').siblings().eq(1);
});
If i click the row that has the id # 1, i need to take the Type
innerHTML. Does not matter what apart of the row i click just take the
second td's html.
$("tr td").click(function () {
secondTd = $(this).siblings().eq(1);
alert(secondTd.html());
});
Try this
$(function () {
$("#thetable tr").click(function () {
if ($(this).index() == 0) return;
$('#tbox').val($('td:nth-child(2)', $(this)).html())
})
});
HTML
<table border="1" cellpadding="4" id="thetable">
<tr>
<td>Id</td>
<td>Type</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table><br />
<input type="text" name="tbox" id="tbox" />
It method takes into account the first row that contains only labels and doesn't set the textbox value to a label if top row is clicked.
I am trying to check multiple checkboxes using one with jQuery. I know how to do this to check all checkboxes or to check multiple if they have ids. I want to be able to do this without that though.
All of my checkboxes are in a similar grouping. I have them grouped in a consistant way.
I have my work on a fiddle here.
Here is my code
window.onCheck = function () {
var totals = [0, 0, 0];
$('tr.checkRow').each(function () {
var $row = $(this);
if ($row.children('td:first').find('input:checkbox').prop('checked')) {
$(this).find('td.imageBox').each(function (index) {
var $imageBox = $(this);
if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
++(totals[index]);
}
});
}
});
$('#total1').text(totals[0]);
$('#total2').text(totals[1]);
$('#total3').text(totals[2]);
};
window.onCheckForm = function (cb) {
var $cb = $(cb);
var $table = $cb.parents("table");
$('input.subFieldCheck').find($table).prop('checked', function () { return cb.prop('checked')});
}
My problem is with the onCheckForm function.
Thank you.
Note: I started writing this answer for a duplicate of this question and realized I couldn't post this, so I posted it here instead. The table structure is different and a lot simplified in this answer.
Lets start off with a very simple table with a checkbox column:
<table>
<thead>
<tr>
<th scope='col' id='toggler'>
<input type='checkbox' id='toggleAll'>
<label for='toggleAll'>Select all</label>
</th>
<th scope='col'>A column</th>
</tr>
</thead>
<tbody>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
<tr>
<td headers='toggler'>
<input type='checkbox'>
</td>
<td>some cell data</td>
</tr>
</tbody>
</table>
Here, I have a checkbox in the header along with a label for accessibility purposes (you may hide the label if you wish).
I've also given the header cell an ID and used the headers attribute for the td elements. This isn't absolutely necessary for what we're doing, however it seems like an appropriate case to use the headers attribute. If you ever want to move the checkbox to another column for certain rows, you can just add the headers attribute to that cell.
Here is some JavaScript code:
$('#toggleAll').change(function () {
$('td[headers~="toggler"] > input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});
We are binding a function to the change event to the checkbox in the header.
The selector will look for all checkboxes that are children of td elements that contain the ID toggler in a space-separated list of tokens in the headers attribute.
The .prop() method sets the checked property of the checkboxes to match the value of the checked property of the one in the header ("this").
Our basic functionality is done here.
We can make improvements though, by changing the state of the checkbox at the top to match the state of the checkboxes in the rows.
The state of the header checkbox should be:
Unchecked if 0 are checked
Interdetermine if (0, n) are checked
Checked if n are checked
Where n indicates all the checkboxes.
To do this, we bind a function to the change event of each of the boxes in the table rows:
$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
var allChecked = true, noneChecked = true;
var headerCheckbox = $('#toggleAll');
$('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
if(domElement.checked) {
// at least one is checked
noneChecked = false;
} else {
// at least one is unchecked
allChecked = false;
}
});
if(allChecked) {
headerCheckbox.prop('checked', true);
headerCheckbox.prop('indeterminate', false);
} else if (noneChecked) {
headerCheckbox.prop('checked', false);
headerCheckbox.prop('indeterminate', false);
} else {
headerCheckbox.prop('indeterminate', true);
}
});
I'm using .each() here to loop through all of the appropriate checkboxes to determine whether all, none, or some are checked.
See the jsFiddle demo.
Hope this helps, I sure learned quite a bit while answering the question!
See this fiddle for a cleaner way:
http://jsfiddle.net/W75dy/19/
<td class="field">
<form class="fieldCheck">
<input type="checkbox" id="Row1Chk" name="Row1" value="Row1" />
</form> Programs
</td>
$('#Row1Chk').on('change', function(event) {
$('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked'));
});
is it possible to change the innerhtml of all the td when it has the input inside, i mean to take the input's value and apply it to it's td innerhtml, for example, here's the table and its input inside:
<table>
<tr>
<td><input value="test" /></td>
<td>123</td>
</tr>
</table>
to change it smth into this:
<table>
<tr>
<td>test</td>
<td>123</td>
</tr>
</table>
for all of the td and input values without applying id's and classes?! please pay attention that td innerhtml didnt change :) thank you all for the help! ;)
That's pretty easy.
Name your table first (to find it easily).
<table id="the_table">
<tr>
<td><input value="test" /></td>
</tr>
</table>
Then you can do this:
$('#the_table td input[type="text"]').each(function() {
var val = $(this).val();
$(this).parent('td').html(val);
});
Live demo.
Explanation:
find all inputs that are within <td> that are in this certain table.
for each input:
2.1 retrieve value from the input
2.2 find first parent of the input that is a <td> tag and set its innerHTML to that value
Yes, you can do it like this:
$('table td:has(:input:only-child)').each(function () {
$(this).html($(':input', this).val());
});
It assumes there only is an input in the td. If that is not the case, then remove :only-child.
Explanation of table td:has(:input:only-child)
It says, take any td within a table, which has an input as the only child.
You can test it here: http://jsfiddle.net/eydtw/
Update: take the input which is not hidden.
$('table td:has(input[type!="hidden"])').each(function () {
$(this).html($('input[type!="hidden"]', this).val());
});
http://jsfiddle.net/eydtw/1/
or: take the input which is text.
$('table td:has(input:text)').each(function () {
$(this).html($('input:text', this).val());
});
http://jsfiddle.net/eydtw/3/
$.each($('table td'),function(){
if($(this).children().length !=0)
{
var temp = $($(this).children()[0]).val();
$(this).html(temp);
}
})