为什么我的按钮只给我表格内第一列的值

Question

why that my button only give me the value of my first column inside a table when i clicked the other button it give me the same output as the first column. here is the code in showing the item inside the table

 try { while($row=$query->fetch(PDO::FETCH_NUM)) { echo '<tr> <td ><div id="studID">'.$row[0].'</div></td> <td>'.$row[1].'</td> <td>'.$row[2].'</td> <td>'.$row[3].'</td> <td> <button class="button active" name="button"value="'.$row[0].'">view</button> </td> </tr>'; } echo '</table>'; } catch(PDOException $e ){ echo "Error: ".$e; }

and here is the coded when i clicked the button

 <script type="text/javascript"> $(".button").click(function(){ var id =$('.button').val(); alert (id); }); </script>>

thanks in advance.

Answer 1

Use this object like below:

<script type="text/javascript">
$(".button").click(function(){
    var id =$(this).val();
    alert (id);
});
</script>>

Answer 2

Click event always get first matching element from dom. If you want to get all buttons get then by for() loop , each loop, map function, or you can follow underscore library.

Answer 3

Don't give your button the value, instead in your click function do

$("td").each(function() {
     var id = $('td').val();
     alert(id);
});

This way it will iterate over each of your td elements and produce an alert with the value of it. Or you can do this:

var valueArray

$("td").each(function() {
     var id = $('td').val();
     valueArray.push(id);
});

alert(valueArray);

Which should hopefully do an alert with all the values in it.

and for your button do:

<button class="button active" name="button">view</button>

But bear in mind that this will do it for all td elements on your page so if you have more than one table this will do an alert for every td in every table you have. To avoid this give the table an id and replace $("td") with $("#tableID td") .

Answer 4

You need to iterate through all the classes available using jQuery.each() function. While here you are only fetching the first element value.

You can try something like below:

<script type="text/javascript">
$(".button").click(function(){
  $( ".button" ).each(function( index ) {
   alert( $( this ).val() );
 });
});
</script>