Question

我有一个像这样的表结构，没有任何ID，跨度有相同的文本。

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

如果我点击第一个跨度，这将打开一个弹出窗口。弹出包含文本框和按钮。如果我键入一些文本并单击按钮，则单击的跨度应替换为新输入的文本。如何识别点击的跨度并替换文本？

我们需要为第二次跨度做同样的事情。

由于

Answer 1

如果您在span中添加了一个click事件，那么您将使用“this”标记引用。然后，如果你在上面调用.text（），相关的标签就会被更新。

像那样：

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

以下是使用jQuery Dialog小部件编辑范围文本的示例

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

Answer 2

当你单击span时，你可以将它传递给你的函数：

 <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

等 span 。

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>

如何区分和替换鼠标上的跨区文本

4 个答案: