Develop Reference

JQuery/Javascript my function is not running when pressing button

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>

Get the parent row and find an element in JQuery

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.

How to get table id using Jquery?

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)
}
});

Cloning table row in Jquery

Running into a bit of a brick wall with jquery, I currently have the following code:
http://jsfiddle.net/uSLhb/1/
The clone method being:
$("#addMore").click(function() {
$('.user_restriction:last').clone().insertAfter(".user_restriction:last");
return false;
});
As you can see I have it set up so you can easily clone the row.
The problem I am facing is showing the correct select list (In the 'Field' column) in the new cloned elements, depending on what field they select from the first select (In the 'table' column) field in the row.
Wondering if anyone can help me find a solution, thanks!

The problem you are facing occurs, because you are using IDs for your selects.
IDs must be unique in a page, otherwise you'll run into trouble. If you're cloning a select with an id, the id will be cloned too, thus producing an invalid document.
Have a look at the example I created on JsBin
Markup:
<tr class="user_restriction">
<td>
<select name="table[]" class="userselect">
<option value="" selected>---</option>
<option value="members">Members</option>
<option value="staff_positions">Staff Positions</option>
</select>
</td>
<!-- and so on, basically just changed ids to classes -->
</tr>
I changed all the IDs to classes and altered the change-handler, because this was your second problem.
An event-handler gets bound to the elements that are selected, not to those you add afterwards. This is a proper use-case for event-delegation, when the handler is bound to a parent and catches, in this example, the change event from a child select-element, no matter when it was added to the DOM.
Using jQuery, this is a way to achieve this:
$('table.table').on('change', '.userselect', function() {
var activeRow = $(this).parents('tr');
activeRow.find('td').eq(1).find('select').hide();
if(this.value.length === 0){
activeRow.find('td').eq(1).find('select').eq(0).show();
}else{
activeRow.find("." + this.value).show();
}
});
The handler is bound to your table - element, .userselect is a class I added to the first select in a row. So every change on an element that was added later would be handled too. In the handler, I changed the behaviour to affect only the actual table-row, not the whole table.

Working example here - I had to use jsbin as fiddle was playing up!
Clone does not maintain the selected state, so you'll need to grab the value before cloning and set it after.
Your click now becomes:
$("#addMore").click(function() {
var value = $('.user_restriction:last').find('select').val();
$('.user_restriction:last').clone().insertAfter(".user_restriction:last");
//alert(value);
$('.user_restriction:last').find('select').val(value);
return false;
});

Clicking row in table 'checking' checkbox?

I hope this is the right area, as it is more theoretical than anything else. I am currently working on a page where a user can select one or many rows to edit by clicking a checkbox in the leftmost column and clicking an Edit button. I haven't decided if I wanted to try programming this feature, but would it be possible to effectively hide the checkboxes and use some sort of javascript or jquery to make clicking a row in a table equivalent to checking the corresponding row's checkbox? I have just started working with javascript and jquery, and I am baffled by how powerful this can be. Please inform me if this type of functionality is possible and if so, what is a general approach to achieving this behavior?

Doable. Here's how:
jsbin link
HTML
<table border=1>
<tr><td><input type="checkbox"></td><td>Something 1</td><td>Something else 1</td></tr>
<tr><td><input type="checkbox"></td><td>Something 2</td><td>Something else 2</td></tr>
<tr><td><input type="checkbox"></td><td>Something 3</td><td>Something else 3</td></tr>
<tr><td><input type="checkbox"></td><td>Something 4</td><td>Something else 4</td></tr>
</table>
jQuery
$('input[type=checkbox]').parent('td').hide(); // If JS disabled, checkboxes are still visible
$('table tr').click( function() {
var $chk = $(this).find('input[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
$(this).toggleClass('selected'); // To show something happened
});
CSS
tr.selected{
background-color:#ccc;
}

Yes this is perfectly achievable, although you might like to consider the accessibility implications in the event that somebody has JavaScript disabled in their browser.
There are a number of approaches you could take. By way of example, you could use a click handler something like the following (untested):
$(document).on('click', '#yourtable tr', function(evt) {
$(this).toggleClass('selected');
});
This would give each tr in your table (with id #yourtable) the class selected which you could then either style via CSS and/or read back via another piece of jQuery.
Within the event handler you could also perform other actions to record the selection, such as updating a hidden input field, posting straight back to the server, or checking the existing checkbox (which could optionally be hidden if you prefer).

Here is a simple implementation of the requested functionality:
$(document).ready(function() {
$('tr').click(function(e) {
var $checkbox = $(this).find('input');
var isChecked = $checkbox.prop('checked');
if (isChecked) {
$checkbox.removeProp('checked');
}
else {
$checkbox.prop('checked', 'checked');
}
});
});​