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

Question

I have the following HTML table:

Which has been generated using the following code:

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

You can notice from the code that the values column are actually hyper-links. How is it possible using jQuery that when i click on any of the hyper link in the value column, that value is moved to the name column from the same row. So for example in the third column, when i click on the "<a href="#"> Cat </a>" hyper link, the word "Cat" will be moved to the second column and replacing the word "Dog"

The important thing is that I cannot put 'id' tags around each word and then use jQuery to do the replacing based on the ID tag. The reason for that is because the table is SO big that if i generate a jquery script for every single row, it would be too much jquery on the page.

So i need a way for jQuery to identify the values based on the column and row number when i click on the link and then do the replacement based on that in the table with id "myTable". If I click in the "Value" column on the word "Cat" on the third row, then jQuery must find the row number i just clicked in and then replace the word "Dog" in the "Name" column of the same row.

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

---

UPDATE:

If you need to be more specific about which anchors get the click function, do this:

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

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

It will only apply the click function to anchors in column 4.

Answer 2

Along the lines of what isherwood posted, I think the better practice would be -

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

$('#myTable a') is going to put a jQuery object on every anchor element which is what the OP did not want. $('#myTable').on('click', 'a',... only puts the jQuery object on the #myTable element and bubbles up the anchor click events.

Here's the code with isherwood's fiddle - isherwood's fiddle modified

Here's more info about the .on jQuery object - jQuery On