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

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

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

所以我需要一种方法，让 jQuery 在单击链接时根据列号和行号来识别值，然后根据 id 为“myTable”的表中的值进行替换。如果我单击第三行“Cat”一词的“Value”列，那么 jQuery 必须找到我刚刚单击的行号，然后替换“Dog”一词>同一行的“名称”列。

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

<小时/>

更新:

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

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

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

它只会将点击功能应用于第 4 列中的 anchor 。