Question

I have a dynamic table with each row having 4 columns.

• Column 1 has a label.
• Column 2 has an input type=text of class gvRate.
• Column 3 has an input type=text of class gvMax.
• Column 4 has a button image with a name attribute of the record’s id.

I am trying to ascertain the values of the inputs when the button is clicked but the alert is something like “3 undefined undefined”. I know I am not using one of the selectors correctly but not sure which.

Here’s the code:

    $(document).ready(function() {
     $("img.btnUpdate").click(function(){
     var id = $(this).attr("name");
     var rate = $(this).parent().find(".gvRate").val();
     var max = $(this).parent().find(".gvMax").val();
     alert(id + ' ' + rate + ' ' + max);
     }); // end btnUpdate click
}); // end document.ready function

Here’s the HTML (sort of)

     <div id="editInnerContent">    
      <table id="gvEdit" align="center" border="1" cellpadding="5px" style="width:600px;">
   <tr>
        <th style="width:40%;text-align:center;">ITEM</th>
        <th style="width:20%;text-align:center;">RATE</th>
        <th style="width:20%;text-align:center;">MAX</th>
        <th style="width:20%;"></th>
   </tr>

     <?php
 foreach( $globalVars as $arrGV){
      echo "<tr>";
      echo "<td><label class='gvItem'>" . $arrGV['item'] . "</label></td>";
      echo "<td><input type='text' class=gvRate' value='" . $arrGV['rate'] . "' /></td>";
      echo "<td><input type='text' class=gvMax' value='" . $arrGV['max'] . "' /></td>";
      echo "<td style='text-align:center;'><img class='btnUpdate' name='" . $arrGV['id'] . "' src='" . base_url() .  "images/update.png' /></td>";
      echo "</tr>";
 } // end foreach
   ?>
      <tr>
   <td colspan="3">
        &nbsp;
   </td>
      </tr>
      <tr style="background:#DC241F;">
   <td colspan="4" style="text-align:center;">
        <img id="btnExitGlobalValues" src="<?php echo base_url();
            ?>images/exitGlobalValues.png" />
   </td>
      </tr>
      </table>
 </div> <!-- END editInnerContent DIV -->

Answer 1

If this is a real HTML table you need to go up two levels of parent.

The first call to .parent() will take you to the <td>, and then you need another to get to the <tr>.

Alternatively use:

$(this).closest('tr').find(...)