How to differentiate and replace the span text on mouse over - jquery-ui

Question

I have a table structure like this with out any ID and span has same text.
<table>
<tr>
<td>
<span>Name</span>
</td>
<td>
<span>Name</span>
</td>
</tr>
</table>
If i click on first span this will open a pop up. Pop up contains text box and Button.If i type some text and click the button, the clicked span should replace with newly entered text. how can i identify the clicked span and replace the text?.
The same way we need to do for second span.
Thanks

Answer 1

you can pass this to your function when you click on span like so:
<table>
<tr>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
</tr>
</table>
You will have to store the element so u can change it later when ure done with the popup.
function openPopup(el)
{
// open popup and if button pressed
el.innerHTML = yourNewText;
}

Answer 2

Here is a simple example of how to achieve this:
http://jsfiddle.net/ApsbC/7/
And the code snippet:
$(document).on("click","span",function(){
alert($(this).text());
// some popup code here
$(this).html("Some new Name");
});
EDIT:
I suggest though putting some class/id on those spans to have a better selector for the .on() method. So instead of having just span you could have something like span.spanClass

Answer 3

Try this:
<table>
<tr>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
<td>
<span onclick="openPopup(this);">Name</span>
</td>
</tr>
</table>
<script type="text/javascript">
function openPopup (o) {
var newText = prompt("Enter some text: ");
$(o).text(newText);
}
</script>

Answer 4

if you add a click event in your span, you will have the tag reference with "this". Then if you call .text() on it, the related tag will be updated.
like that :
$('span').click(function() {
$(this).text('new text');
})
Here is an example using jQuery Dialog widget to edit span text
http://jsfiddle.net/npch3/2/