I want to use a toggle button next to a table to hide or show table rows based on the whether or not a checkbox in the last column of the table is checked.
Here is the code for the table:
<table>
<tr>
<td>1<td>
<td>Text<td>
<td><input type="checkbox" class="form-checkbox" checked="checked"><td>
</tr>
<tr>
<td>2<td>
<td>Text<td>
<td><input type="checkbox" class="form-checkbox"><td>
</tr>
</table>
In the sidebar I have this button:
<a id="comtoggle" class="btn" href="#">Toggle</a>
In the above example, I would like for row 1 to disappear if the Toggle button is clicked, but have it reappear if the toggle button is clicked again. The state of the checkbox is stored in a database and is saved via an AJAX function (which works fine).
Here is the jQuery I have. I think my problem is using the .is(':checked') in the 3rd line.
$("#comtoggle").click(function() {
if ($('.form-checkbox').is(':checked')) {
$('.form-checkbox').is(':checked').closest('tr').toggle();
}
});
With this snippet, all of my rows disappear, and the console of Firebug shows this error:
TypeError: $target.offset(...) is null
Not sure if it is related.
I suppose this is what you mean. Catch the fiddle aswell: http://jsfiddle.net/7C423/1
All you need to do is just grab that what you are interested in and play the ball.
$("#comtoggle").click(function() {
$(".form-checkbox:checked").closest("tr").toggle();
});
Since you are selecting elements by class, you need to loop trough them and in case they are checked hide a row.
$("#comtoggle").click(function() {
$('.form-checkbox').each(function(chk){
if($(this).is(':checked'))
$(this).closest("tr").toggle();
});
});
Related
I have a button, when I click I want it to get all data from the row. My .php file (i also have php code not included here) looks like so (I trimmed out the table for stackoverflow)
<tr class='rowdata'>
<td>Bob</thd>
</tr>
<input type='submit' class='getRow' value='ClickMe'>
<script>
$(".getRow").click(function() {
var rowOfData = $(this).closest(".rowdata");
alert(rowOfData.text());
});
</script>
Right now I click and nothing happens. Any ideas? The . prefix means it is searching for class.
Well first, have you checked your developer's console (F12) to see if you have any errors. Are you sure you've referenced the JQuery library.
Next, even with JQuery referenced, .closest() is going to search the ancestor elements of the element you call it on. If your button is not a descendant of the element you wish to find, you won't find it.
Now, assuming that .closest() does find your row, you are then asking for the .text() in the entire row. This may be what you want, but it's seems more likely that you'd want data cell by cell.
Also, your button is a submit button which is used for submitting form data, but it doesn't appear that that's what you're doing here. If that's the case, use a regular button.
And, your HTML isn't valid as you have a bad closing tag for your cell.
So, correcting all that:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='rowdata'>
<td>Bob</td>
<td>Smith</td>
<td><input type='button' class='getRow' value='ClickMe'></td>
</tr>
</table>
<script>
$(".getRow").click(function() {
var rowOfData = $(this).closest(".rowdata");
alert(rowOfData.text()); // Gets all the text in the row
alert($("td:first-child", rowOfData).text()); // Gets just first cell
});
</script>
I create a row by clicking the addNewRow button, I validate all input cell of that's row and after that, I click "CompletedBtn" and the row will disable.
but when I want to edit the specific row, when I click editBtn I want to check if any one of cell's prop("disable", false) or not in the entire table. if I get false, then I don't provide to edit row before complete another row that is property("disable", false).
How Can I find it?
Considering that you have something like
<table id="mytable">
<tr>
<td disable="false">content</td>
...
</tr>
...
</table>
You could count disabled cells by doing
$("table#mytable tr td[disable='false']").size()
The CSS selector depends on you =)
I have a checkbox in a column of an html table. When I check or uncheck it I want some text to be displayed/removed from a text area in the next column of the same row.
I did the following:
$(this).parent().parent().find('textarea').text = 'some text'
and also
$(this).parent().parent().find('textarea').val = 'some text'
but it does not work.
The html is like:
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<textarea>
</td>
</tr>
I want to get the textarea of the same tr of the checkbox I check
UPDATE
I found that I should use .val("some text") but now the function is called only if I click the checkbox in the first row. Not for the rest
The issue is with how you are trying to set the value not how you are finding the element
try this
$(this).closest('tr').find('textarea').val("some text");
See here for more info .val()
UPDATE
an element ID has to be unique so you can't reuse the same one. Give all your checkboxes unique id's i.e "chkOne", "chkTwo" etc. Then use a class on all the checkboxes you wish to run this functionality from. i.e class="chkSelection". Then change your jQuery to look like this
$('.chkSelection').change(function() {
if($(this).is(':checked')){
$(this).closest('tr').find('textarea:first').text('Some text here');
}
});
This way all your checkboxes with a class of "chkSelection" when changed will run the functionality to find the next textarea and set the text.
Just give them identifiers, as surely you'll need to reference them somehow elsewhere (and if your structure changes it won't break as a side-effect) - note the use of val(), too:
<tr>
<td><input id="someName" type="checkbox"/></td>
<td><textarea id="someOther"></textarea></td>
</tr>
Then you can reference them explicitly:
$("#someName").change(function(e) {
$("#someOther").val("some value");
});
Keep it simple.
try this code
$("table input[type=checkbox]").change(function(){
// Your code.
});
Give generic classes to all the checkboxes and textareas... In the .change() function of the checkbox try using this: (Considering the class of the textarea is textarea)
$(this).parent().find('.textarea').html("Your text here");
To check if the checkbox is checked/unchecked, try attr('checked').. Also to get the values of all checked checkboxes, try 'input[type="checkbox"]:checked').val()
my solution
$('table input:checkbox').change(function(){
$(this).parent().next().find('textarea').val("some text");
});
If you want to be able to toggle the text on and off by checking/unchecking the box, something like this would work:
$("input[type=checkbox]").change(function() {
$(this).filter(":checked").parent().next().text('Text!");
$(this).not(":checked").parent().next().text('');
})
This would listen for any change to any checkbox on your page. When a checkbox changes, it will select the checkbox's parent's sibling (the next <td> element after the one surrounding the checkbox) and set its text to 'Text!' if the box is checked, or an empty string if the box is unchecked.
The benefit to using this method, aside from the text on/off functionality, is that you don't need to assign CSS classes/ids for it to work.
In my Java program I have a List<DemoTable>.
List<DemoTable> demotable = new ArrayList<DemoTable>();
DemoTable is a class with id,name,and details variables.
I display these details using Jquery..
<table>
<c:forEach items="${modalAttribute.demotable}" var="demo">
<tr class="M_row_bg M_read">
<td><input type="checkbox" id="isDelete"/></td>
<td><label for="name">${demo.name}</label></td>
<td><label for="totalExperience">${demo.details}</label></td>
</tr>
<c:forEach>
</table>
Data will be displayed correctly ... but when check box is clicked I want to get Table row id:
$("#isDelete").click(function(){
if (this.checked){
alert('checked');
alert(demo.id);
} else {
alert('unchecked');
}
} );
I expect this alert to give the DemoTable id, but this alert does not show. Also, this click only works for the first row of the table.
How can I get the DemoTable id when I click the check box?
What does my code need to work with each row of table click event, not just the first row?
you're using #isDelete multiple times in the table. This is illegal, and the reason your code only works on the first row. Use a class instead.
your table rows don't even have an ID. They do however have an implicit index.
you should give your table an ID
you can use "event delegation" and just register a single click handler on a common parent element (i.e. the table) which then uses event bubbling to figure out which actual element was clicked. This can be more efficient than registering the exact same event handler explicitly on every matching element.
Try this instead:
$('#myTable').on('click', '.isDelete', function(){
if (this.checked) {
var rowId = $(this).closest('tr').index(); // row within table (0 based)
}
});
I've asked a lot of jQuery questions recently as I'm trying to use it rather good old Javascript, as I mentioned in previous questions, "I'm currently having to extend an very old ASP.NET site which has a database generated front end and is a behemoth of an application, it needs completely rewriting - however I've been told to add to it than redevelop it "
Now what I'm doing is once the backend is rendering a table to the interface I wish to loop through the tr elements of the table, within one of the td elements of the tr there are two radio buttons. I need to determine the name of the radio button group as I don't define them, the systems does using a GUID or something?
This is the table for example...
<table id="tableID">
<tr>
<td class="qCol">
<!-- Label here -->
</td>
<td class="qCo2">
<!-- img here -->
<!-- and a text box -->
</td>
<td class="qCo3">
<!-- select menu here -->
</td>
<td class="qCo4">
<!-- radio buttons here -->
</td>
<td class="qCo5">
<!-- select menu here -->
</td>
<td class="qCo6">
<!-- hidden validation image here -->
</td>
<tr>
</table>
Okay, I'm looping through the table and at the same time switching the innerHTML of one cell to another and hiding some of the rows, I'll be adding functionality to show these later, here's the jQuery:
$('#tableID tr').each(function (i) {
/*switch select and validation and clear */
$(this).children('td.qCol').html($(this).children('td.aCol5').html());
$(this).children('td.aCol5').html($(this).children('td.vCol'.html(""));
/* hide all but the first row*/
if (i >= 1) {
$(this).hide();
}
now I'm trying to determine the name attribute of the radio buttons that will be in the cell with class .qCo4, however I'm having no luck as the following returns an error and is "undefined"...
/* get the radio button name and check if either are selected*/
// check something exists...
if ($('input:radio', this).attr('name')) {
var thisRadioName = $(this).closest("input:radio").attr('name').val();
alert(thisRadioName);
}
$this is the tr element, so should I be using child rather than closest? If this makes no sense I can expand and explain better.
you should use find() or children(). closest() goes up the tree, while find looks for elements down the tree
var thisRadioName = $(this).find("input:radio").attr('name');
you can use also ':checked' to check if any radio is checked
var checkedRadio = $(this).find("input:radio:checked")
You should use children if you are absolutely sure that the elements you are looking for are direct child of the element, otherwise use find(). (using finds protect you from refactoring code if you modify the html, like adding a wrapping div for other reasons like styiling)
look at this fiddle: http://jsfiddle.net/nicolapeluchetti/Evq6y/
var thisRadioName = $(this).find("input:radio").attr('name');
should do what you want