Question

我有以下HTML表格：

enter image description here

使用以下代码生成的内容：

<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>"超链接时，单词＆＃34; Cat＆＃34;将移至第二列并替换“＃34; Dog＆＃34;

重要的是我不能把＃id;＆＃39;在每个单词周围标记，然后使用jQuery根据ID标记进行替换。原因是因为表格很大，如果我为每一行生成一个jquery脚本，那么页面上的jquery就会太多了。

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

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());
});

它仅将点击功能应用于第4列中的锚点。

Answer 2

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

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

$（＆＃39; #myTable a＆＃39;）将在每个锚元素上放置一个jQuery对象，这是OP不想要的。 $（＆＃39;＃myTable＆＃39;）。on（＆＃39;点击＆＃39;，＆＃39; a＆＃39;，...只将jQuery对象放在#myTable元素上并冒泡锚点击事件。

以下是伊瑟伍德小提琴的代码 - isherwood's fiddle modified

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

jQuery，在表格中从一个单元格到另一个单元格中的另一个单元格中复制超链接值

2 个答案: