getting the some td row values with jquery using class not id

Question

How can I get the td values with jquery? The while loops will generate a few with the same class name...

<table>
   <?php
   while(...){
   ?>
   <tr>
      <td class="datao">data 0</td>
      <input type="button" class="getValue" value="Delete" />
   </tr>
   <?php
   }
   ?>
</table>

Jquery's:

$(".getValue").click(function(){ $.post("somescript.php", { value:$("data0").val()}, function(data){ alert(data); }); });

UPDATE:

Well, I'm generating a table with data that came's from a database. After that I want to delete any row from the database so, I put a button attached to every data value () the problem here is to get the proper td value once I'm using the same class name on every button and td... after that I will use AJAX and delete the PROPER row of data from database with PHP.

UPDATE:

The generated code will look like this:

<table>
       <tr>
          <td class="datao">xzczxc</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">gfh+pso</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">sdhgfjgk</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">asdghdas</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">egfcn</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">sdfds..k</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">6ytytu</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">tyghj0</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">daghjgh0</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">dagh0</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">dada0</td>
          <input type="button" class="getValue" value="Delete" />
          <td class="datao">dasa</td>
          <input type="button" class="getValue" value="Delete" />
       </tr>
</table>

How to delete for example the fourth row? Or the fifth?

I just want to get the td values when press the button and passe those values to the php script that all.

I want to pass some td values to ajax call when pressing the button "Delete"

<table>
       <tr>
          <td class="datao">first column</td>
          <td class="data1">first column</td>
          <td class="data2">first column</td>
          <td colspan="2"></td>
       </tr>
       <tr>
          <td class="datao">jkhghj</td>
          <td class="data1">dsfg</td>
          <td class="data2">iouhfg</td>
          <input type="button" class="deleteRow" value="Delete" />
       </tr>
       <tr>
          <td class="datao">hgjdss</td>
          <td class="data1">oiuy</td>
          <td class="data2">qweasd</td>
          <input type="button" class="deleteRow" value="Delete" />
       </tr>
       <tr>
          <td class="datao">aweda</td>
          <td class="data1">asd</td>
          <td class="data2">asd</td>
          <input type="button" class="deleteRow" value="Delete" />
       </tr>
       <tr>
          <td class="datao">asdasvg</td>
          <td class="data1">esw</td>
          <td class="data2">ee</td>
          <input type="button" class="deleteRow" value="Delete" />
       </tr>
       <tr>
          <td class="datao">qw</td>
          <td class="data1">zdg</td>
          <td class="data2">lykj</td>
          <input type="button" class="deleteRow" value="Delete" />
       </tr>
</table>

Answer 1

So it look like nobody answered my question with a proper answer to my problem, anyway I have to thank you all for your inputs.

I've worked around and found out a way not perfect but works ok...

Suposing I want to grab the values of input, select or anything else inside of tr...

$('input.buttonClass').live('click', function() {
        var valuesArray = [];

        $(this).closest('tr').find("select").each(function() {
            valuesArray.push($(this).attr('value'));
        });

        $.post("script.php", { somename:valuesArray[0], otherName:valuesArray[1] }, function(data) {
                do something in here with the returned data!
            });
        }

    });

In the above code the value of a select tag inside of a tr will be stored in the array and passed with the ajax call to the php script. to store values from other input types such as input type="text" do like so: ...find("select, input[type=text]").each... I hope that someone's getting help with my work. Thank you all.

Answer 2

Reading the comments it seems like you want a specific one to get the value from.

To do this, use .eq:

$(".datao:eq(0)").val(); // first one

However, is it datao or data0 and data1 etc? A sample HTML output would be helpful.

Edit: I hope I understand you better.

$(".getValue").click(function(){
    $.post("somescript.php", { value: $(this).parent().find('td').html() },
                               function(data){
                                    alert(data);
                               });
});

Answer 3

Assuming you want the individual values:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript"><!--
jQuery(function($){
    $("button").click(function(){
        var values = [];
        $("table td.datao").each(function(){
            values.push( $(this).text() );
        });
        alert(values.join("\n"));
    });
});
//--></script>
</head>
<body>

<table>
    <tr><td class="datao">data 0</td></tr>
    <tr><td class="datao">data 1</td></tr>
    <tr><td class="datao">data 2</td></tr>
    <tr><td class="datao">data 3</td></tr>
    <tr><td class="datao">data 4</td></tr>
</table>

<button>Get values</button>

</body>
</html>

Answer 4

You can use the map() function to get the text for all of the matched elements like this:

var values = $('td.datao').map(function() {
    return $(this).text();
}).get();

The get() at the end returns a normal javascript array rather than a jQery wrapped one.

Answer 5

FCC-PT has it right:

$("data0")[0].val() will give you the first entry value. You need to loop or each() them to get the list of values. But you need to provide more context to understand what you are doing.