如何區分和替換鼠標上的跨度文本

Question

我有一個像這樣的表結構沒有任何ID和span具有相同的文本。

<table> 
    <tr> 
     <td> 
      <span>Name</span> 
     </td> 
     <td> 
      <span>Name</span> 
     </td> 
    </tr> 
</table> 

如果我點擊第一個跨度，將會彈出一個彈出窗口。彈出包含文本框和按鈕。如果我鍵入一些文本並單擊該按鈕，單擊的範圍應替換爲新輸入的文本。我如何識別單擊的跨度並替換文本？

我們需要爲第二個跨度做同樣的事情。

感謝

Answer 1

，如果你在你的跨度增加一個點擊事件，你將與「本」的標籤參考。那麼如果你在它上面調用.text（），相關的標籤將被更新。

這樣的：

$('span').click(function() { 
    $(this).text('new text'); 
}) 

下面是使用jQuery的對話框控件編輯跨度文本

http://jsfiddle.net/npch3/2/

Answer 2

您可以通過給你的功能，當你點擊一個例子跨度如下：

<table> 
    <tr> 
    <td> 
     <span onclick="openPopup(this);">Name</span> 
    </td> 
    <td> 
     <span onclick="openPopup(this);">Name</span> 
    </td> 
</tr> 
</table> 

您將不得不存儲元素，以便稍後使用彈出窗口進行更改。

function openPopup(el) 
{ 
    // open popup and if button pressed 
    el.innerHTML = yourNewText; 
} 

Answer 3

下面是如何實現一個簡單的例子：

http://jsfiddle.net/ApsbC/7/

和代碼片段：

$(document).on("click","span",function(){ 

alert($(this).text()); 
// some popup code here 
$(this).html("Some new Name"); 
}); 

編輯：

我建議儘管在這些跨度上放置一些class/id，以便有更好的選擇器。 on（）方法。因此，而不是隻具有跨度你可以有像span.spanClass

Answer 4

試試這個：

<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>