Readingvalues from td ids from table

I have a table as follows and upon clicking the edit button I want to read it`s rows values from the td ids

<table>
    <tr>
      <td id="Name">111</td>
      <td id="surname">aaaa</td>
      <td><input type="button" id="edit" value="edit"/></td&开发者_如何学运维gt;
    </tr>
    <tr>
      <td id="Name">123</td>
      <td id="surname"></td>vvv
      <td><input type="button" id="edit" value="edit"/></td>
    </tr>
    <tr>
      <td id="Name">122</td>
      <td id="surname">vvvvv</td>
      <td><input type="button" id="edit" value="edit"/></td>    
    </tr>
</table>

try

js

$(document).ready(function(){   
    $('input[type=button]').click ( function () {
        var fName = $(this).parents("tr").find("td.Name").html();
        var surName = $(this).parents("tr").find("td.surName").html();
        alert('\nName:'+fName +' surName:'+surName +'\n');
});

revised HTML:

<table border=1 cellpadding=5>
    <tr>
        <td class="Name">111</td>
        <td class="surName">aaaa</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>
    <tr>
        <td class="Name">123</td>
        <td class="surName">vvv</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>
    <tr>
        <td class="Name">122</td>
        <td class="surName">vvvvv</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>

DeMO

There are a few issues with your markup. Firstly Ids should always be unique. If you want to apply a common name across multiple elements then a class would be a better idea. Also you seem to be missing some table rows. Assuming this is corrected you should be able to access the value you require in a multiple of ways:

<table> 
    <tr>
        <td class="Name">111</td>
        <td class="surname">aaaa</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td> 
    </tr>
    <tr>
        <td class="Name">123</td>
        <td class="surname">vvv</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td>
    </tr>
    <tr>
        <td class="Name">122</td>
        <td class="surname">vvvvv</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td>
    </tr>
</table>

Assuming this is the markup then:

$('.edit').click(function() {
    var idVal = $(this).parent().siblings('.Name').html();
    alert(idVal);
});

or

$('.edit').click(function() {
    var idVal = $(this).closest('tr').find('td:first').html();
    alert(idVal);
});

using scopes

$('.edit').click(function() {
    var idVal = $('.Name', $(this).closest('tr')).html();
    alert(idVal);
});

etc...

First there are quite a few little error errors (the 7th td is missing an opening tag). Also an id should only be used once, you can't/shouldn't have id='name' x3, or id='surname' x3.

Once they are fixed up, you can use the following jquery to grab an id:

$("#surname").html(); // where surname is the id 

Example for the Name:

$('input:button')
 .click(function(){alert($(this).closest('tr').find('td[id="Name"]').text());});

(Assuming that you forgot some rows inside your code)

But as an ID has to be unique, you should better remove the ID's and try using the index of the td's:

$('input:button')
 .click(function(){alert($(this).closest('tr').find('td:eq(1)').text());});

(This will for example find the 2nd <td>, whose ID actually is "surname")