Skip to content Skip to sidebar Skip to footer

How To Get The Row Id Of Html Table

Assume I have some data from the database and store in a array, which like this: $testArray = array( array('0', 'name1', 'status1'), array('1', 'name2', 'status2') ); and

Solution 1:

You Could:

  1. Give each of your select's an id that correspond to the row of data.

  2. On change(jQuery), Get the value of the select, and use the jquery ajax call to send the rowID, and the 'StatusValue' to the handling page.

  3. Show an status message on return of data.

http://api.jquery.com/jQuery.ajax/

--Building the Select

<?phpfor ($i = 0; $i < count($testArray); $i++){
                echo'<tr>';
                for ($j = 0; $j < count($testArray[$i]); $j++){
                    echo'<td>';
                    echo$testArray[$i][$j];
                    echo'</td>';
                }
                echo'<td>';
                **echo'<select id="' + $testArray[$i][0] + '">';**
                echo"'<option value='0'>status1</option>";
                echo"'<option value='1'>status2</option>";
                echo'</select>';
                echo'</td>';
                echo'</tr>';
            }
?>

--The jQuery (you will need the jquery file, download from jquery.com)

$(document).ready(function(){
    $('select').change(function () {
        var rowIdVal = $(this).attr('id');  // the id of the select (your rowID)var statusVal = $(this).val();  // the value of the select// post id to the server using ajax (you can use jQuery ajax request)////I would check if the values are valid and not null...
        $.ajax({
           type: "POST",
           url: "YOURHANDLERFILE.php",
           data: {status: statusVal, rowId: rowIdVal},
           success: function(d){     
                //show a status message     
           }
         });
    });
});

Solution 2:

You can:

  1. Store your row id in the hidden field in the first column and the get using jQuery
  2. Store as id attribute and then using jQuery get the value
  3. (I think the best one) store the id in id attribute in the your select control and then get value on selected index change using jQuery

    in html you will have:

    <select id="1">

    in javascript:

    $('select').change(function () {
        var id = $(this).attr('id');
    
        // post id to the server using ajax (you can use jQuery ajax request)
    });
    

Solution 3:

I would do something like

$('#yourTableId').find('select').change(function() { //bind a change event to the selects
   $(this).closest('tr') //this way you get the tr element of the row you changed the select value
        .find('td:first') //or .find('td').first(). This will give you the td element for the Id column
        .val(); //The actual value of the td Id element
});

Post a Comment for "How To Get The Row Id Of Html Table"