jQuery，在表中单击超链接值时，将其从一个单元格复制到同一行中的另一个单元格

Question

我有以下HTML表：

使用以下代码生成的：

<table id="myTable">
<thead>
<tr>
    <th> ID</th>
    <th> Name</th>
    <th> Number</th>
    <th> Values</th>
</tr>
</thead>
<tbody>
<tr>
    <td> 1</td>
    <td> House</td>
    <td> 324342</td>
    <td>
        <a href="#"> House </a> <br/>
        <a href="#"> Cat </a> <br/>
        <a href="#"> Dog </a> <br/>
        <a href="#">Street </a>
    </td>
</tr>
<tr>
    <td> 2 </td>
    <td> Car </td>
    <td> 45353 </td>
    <td>
        <a href="#"> House </a> <br/>
        <a href="#"> Cat </a> <br/>
        <a href="#"> Dog </a> <br/>
        <a href="#">Street </a>
    </td>
</tr>
<tr>
    <td> 3 </td>
    <td> Dog </td>
    <td > 5353 </td>
    <td>
        <a href="#"> House </a> <br/>
        <a href="#"> Cat </a> <br/>
        <a href="#"> Dog </a> <br/>
        <a href="#">Street </a>
    </td>
</tr>
<tr>
    <td> 4</td>
    <td> Street </td>
    <td> 354235</td>
    <td>
        <a href="#"> House </a> <br/>
        <a href="#"> Cat </a> <br/>
        <a href="#"> Dog </a> <br/>
        <a href="#">Street </a>
    </td>
</tr>
</tbody>
</table>

您可以从代码中注意到，values列实际上是超链接。 当我单击值列中的任何超链接时，使用jQuery怎么可能将该值从同一行移到名称列。 因此，例如在第三列中，当我单击"<a href="#"> Cat </a>"超链接时，单词“ Cat”将移至第二列并替换单词“ Dog”

重要的是，我不能在每个单词周围放置“ id”标签，然后使用jQuery根据ID标签进行替换。 这样做的原因是因为表太大了，如果我为每一行生成一个jquery脚本，那么页面上的jquery就太多了。

因此，当我单击链接然后基于ID为“ myTable”的表中的内容进行替换时，我需要jQuery根据列和行号标识值的方法。 如果我在第三行的“猫”上单击“值”列，那么jQuery必须找到我刚刚单击的行号，然后在同一行的“名称”列中替换单词“狗”。

http://jsfiddle.net/isherwood/Z6N65/

Answer 1

http://jsfiddle.net/isherwood/Z6N65/2/

$('#myTable a').click(function () {
    $(this).closest('tr').find('td').eq(1).text($(this).text());
});

http://api.jquery.com/click

http://api.jquery.com/closest

http://api.jquery.com/find

http://api.jquery.com/eq

http://api.jquery.com/text

---

更新：

如果您需要更具体地了解哪些锚获得点击功能，请执行以下操作：

http://jsfiddle.net/isherwood/Z6N65/4/

$('#myTable td').eq(3).find('a').click(function () {
    $(this).closest('tr').find('td').eq(1).text($(this).text());
});

它将只将click功能应用于第4列中的锚点。

Answer 2

按照isherwood发布的内容，我认为更好的做法是-

$('#myTable').on('click', 'a', function(){
    $(this).closest('tr').find('td').eq(1).text($(this).text());
});

$（'＃myTable a'）将在每个锚元素上放置一个jQuery对象，这是OP所不需要的。 $（'＃myTable'）。on（'click'，'a'，......仅将jQuery对象放在#myTable元素上，并使锚定单击事件冒泡。

这是伊舍伍德的小提琴的代码- 修改伊舍伍德的小提琴

这是有关.on jQuery对象的更多信息-jQuery On