We Keep Coding

How do I pass (or reference) "$(this)" from html event?

Let's say I have a button in a table which adds a new row to a table:
<td><a onclick="addRow()"></a></td></tr>...
and I want to reference $(this) or $(this).closest('tr') from the function at the bottom of the page.
function addRow(){
$(this) // contains all information from the row which pressed the button
}
Simply passing a javascript variable from the HTML will result in null (as expected). Is there a way to reference the row that pressed the button?

The RECOMMENDED way of doing this is unobtrusive and delegated - give the link a class:
var $tb = $("#someTable");
$tb.on("click", ".addRow", function(e) { // delegation to allow new rows' links to work
e.preventDefault(); // stop any click side effects
var $row = $(this).closest("tr");
$tb.append($row.clone())
});
a { text-decoration:none }
td,th { padding:3px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>Add</th>
</tr>
</thead>
<tbody id="someTable">
<tr>
<td>1st</td>
<td>2nd</td>
<td><a class="addRow" href="#">+</a></td>
</tr>
<tr>
<td>3rd</td>
<td>4th</td>
<td><a class="addRow" href="#">+</a></td>
</tr>
</tbody>
</table>

Use this
<td><a onclick="addRow(this)"></a></td></tr>
and then:
function addRow(e){
console.log($(e)) // contains all information from the row which pressed the button
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a onclick="addRow(this)">Clickme</a>

You can reference the row that you clicked using an event.
<td>Add</td>
and in javascript you can check the event
<script>
function addRow(event) {
console.log(event);
}
</script>

jQuery doesn't work on table generated from response of Java servlet

I have a curious problem with a table generated from the servlet response.
The thing is:
I have an HTML page with a button, the user press the button and an Ajax call starts towards a Java Servlet. The servlet responds with a simple HTML table that appears inside a div under the button.
I have created a simple jQuery function that at every click on the elements TD print a message in Javascript console log. But at the click on the TD it doesn't do anything.
The strange thing is that on the same page there is the same HTML table (not generated by javascript but contained in the HTML page) and in that case, the jQuery function works fine.
Here the code of the table:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Here the jQuery code:
jQuery(document).ready(function() {
$("td").click(function() {
console.log("testlog");
});
});
Thanks

Problem is that the dynamicaly generated table does not have event listener because it loaded later than DOM you cannot listen to click directly on td but either on whole document or on wrapper of the table here is working example.
I am loading table in .5s to simulate ajax.
setTimeout(function() {
$('#wrapper').append(`<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>`)
}, 500)
//works
$('#wrapper').on('click', 'td', function() {
console.log('this works')
})
//this does not
$('td').on('click', function() {
console.log('this does not work')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>

well you need to put your script after you render the ajax call and not when document ready event.
well i dont know how your code looks but do something like that
$.ajax({
//options
}).done(function(res){
$('body').append(res)
$("td").on('click',function() {
console.log("testlog");
});
})

always use .on in this case
jQuery(document).ready(function() {
$("td").on('click',function() {
console.log("testlog");
});
});

How to hide all tr from table except clicked one

I want to hide all <tr> of the table except on which I clicked.
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td><i class="delete">delete </i></td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td><i class="delete">delete </i></td>
</tr>
</table>
On click of delete button hide all rows except current.
Jquery code:-
$(document).ready(function () {
$('table tbody tr').siblings().not($(this)).hide();
});
Please suggest me.

Use siblings as follow:
See the comments inline in code:
// Bind click event on `tr` inside `table`
$('table').on('click', 'tr', function () {
// Show current `tr` and hide others
$(this).siblings().hide();
});
Demo: http://jsfiddle.net/tusharj/LL0c2efg/

You need to run your code under a click event handler, not when the page loads. Also note that .not(this) is redundant when using siblings() as the originating element would not be included anyway. Try this:
$(document).ready(function() {
$('table tbody tr').click(function() {
$(this).siblings().hide();
});
});
Example fiddle

$(document).ready(function () {
$('table tbody tr').click(function(){
$('table tbody tr').hide();
$(this).show();
})
});
DEMO

delete table row

I have a table like this:
<table>
<tr>
<td>foo</td>
<td><button>delete</delete></td>
</tr>
<tr>
<td>foo</td>
<td><button>delete</delete></td>
</tr>
</table>
I want to use JQuery to install a click handler on the delete buttons such that it deletes the current row when clicked

Give a class of, for example, "delete" to the delete buttons, then use this:
$("button.delete").click(function() {
$(this).closest("tr").remove();
});
Alternatively, if you can't add the class, you can use the :contains selector:
$("button:contains('delete')").click(function() {
$(this).closest("tr").remove();
});
Update (now that the code in the question has completely changed)
Now that you have changed the code in the question to contain only one button instead of two, you don't need to bother adding the class, or using the :contains selector, you can just use the plain old button selector:
$("button").click(function() {
$(this).closest("tr").remove();
});

Try this. As a side not you should not have same id to any dom element on the page.
$("button").click(function() {
$(this).closest("tr").remove();
});
In your markup the tags are not closed properly. E.g the button tag is not closed properly so the selector will not work. Give a unique id or a class name to select the required buttons.
Something like this
<tr>
<td>foo</td>
<td>Some content</td>
<td><input type="button" class="delete" value="Delete" /></td>
</tr>
Using delegate to attach event handler only to table for better performance. This way the click event will be attached only to the table element no matter how many rows it has.
$("table").delegate("input.delete", "click", function() {
$(this).closest("tr").remove();
});

You can try soemthing like this:
<table>
<tr>
<td>row 1, cell 1</td>
<td><img class="delete" src="del.gif" /></td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td><img class="delete" src="del.gif" /></td>
</tr>
</table>
And your jQuery:
$('table td img.delete').click(function(){
$(this).parent().parent().remove();
});

First off, there's a syntax error in your HTML, and you should a class identifier for easier access to those buttons:
<table>
<tr>
<td>foo</td>
<td><button class="delete">delete</button></td>
</tr>
<tr>
<td>foo</td>
<td><button class="delete">delete</button></td>
</tr>
</table>
Next, here's the jQuery code you need:
$(function() {
$('button.delete').click(function(event) {
event.preventDefault();
$(this).closest('tr').remove();
});
});

how to catch the table data td value?

How to catch the td value in jquery on mouse click event? I have done these things in pure js but it is lengthy. Can jquery have easy solution? I want to add those catch value in the form text field.

$("#theTable").click(function(e) {
var data = $(e.target).closest("td").text();
});

<script type="text/javascript">
$(document).ready(function(){
$("#myTable td").click(function(){
alert($(this).html());
})
})
</script>
<table id="myTable" border="1" >
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</table>

You can use .delegate(). One handler on the container element (table) manages events on all the contained elements (filtered to your preference, e.g. "td"):
$('#thetable').delegate('td','click', function(){
alert('Value is ' + $(this).text() );
});