使用jquery获取表中输入框的值

Question

I have a table containing multiple rows of input boxes. Entire table and its contents are created dynamically using jQuery Post. Each tr in the table has 7 td and the first td contains a radio button and remaining have text input boxes with values. User has to change the values in the text boxes and click on radio button to update the same. how to get the value if input boxes in the selected row?

I used following function to pop an alert message

jQuery(document).delegate("[name='edit']", "click",function (e) {
alert("clicked");}

This is working. I want to get values of input boxes using this. closest tr input . But do not know the syntax. Please help

the script for creating the table is like this:

echo'<form id="shiftentry" name="shiftentry" >';


 echo "Date:<input id=shiftdate value='".$date."'/>"; 
 echo "Unit:<input id=shiftdate value='".$unit."'/>";
 echo "Shift:<input id=shiftdate value='".$shift."'/><br/>";

   echo "<table><tr><th>No</th><th>Ele</th><th>Location</th><th>Drate </th><th>H3 Val </th><th>Part </th>   <th>Iod</th><th>Cont. </th></tr>";
            while($row2=mysql_fetch_array($result_sec))
                { 
                echo "<tr>";
     echo "<td><input name='edit' type='radio'/></td>";
                echo "<td>".++$rc."</td>";
                echo "<td><input size='5' id='".$row2['ele']."' value='".$row2['ele']."' /></td>";
                echo "<td><input id='".$row2['loc_id']."' value='".$row2['loc']."' /></td>";
                echo "<td><input size='5' id='drate".$rc."'  value='".$row2['drate']."'/></td>";
                echo "<td><input size='5' id='h3".$rc."' value='0' /></td>";
                echo "<td><input size='5' id='part".$rc."' value='0' /></td>";
                echo "<td><input size='5' id='iod".$rc."' value='0' /></td>";
                echo "<td><input size='5' id='cont".$rc."' value='0' /></td>";
                echo "</tr>";
            }



  echo " </table>";



   echo '<div align="center">';
   echo '<input type="submit" id="submit2" name="submit2" value="Submit" width="30" />';
   echo '</div>';

 echo '</form>';

Answer 1

Take a look on .closest() and :eq() selector.

jQuery(document).delegate("input[name='edit']", "click",function (e) {

    // Will return the Parent Row of clicked input
    var _tr = $(this).closest('tr');

    // You have 9 td in particular row 
    // Let's access the 7th input box: <input size='5' id='iod".$rc."' value='0' />
    $('td:eq(7) input', _tr).val(); // will return its value
});