CODEWITHSUNDEEP
phpjavascript
user878729
user878729

Reputation: 93

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 I can print the content of the array as a html table, like this way:

Id  name    status
0   name1   status1 
1   name2   status2

I want to use a 'status' dropdown list at the end of each row to change the status of each entry, and update into the database table. My questions are: How do I get the row id of each row(the 'Id' column) when I select a option of the drodown list? How to pass these info to the backend inorder to update the database table? I guess it should use some javascript. And below is the code:

<?php

$testArray = array(
    array('0', 'name1', 'status1'),
    array('1', 'name2', 'status2')
);
?>

<html>
    <head>   
    </head>
    <body>
        <table>
            <tr>
                <td>Id</td>
                <td>name</td>
                <td>status</td>
            </tr>
            <?php
            for ($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>';
                echo "'<option value='0'>status1</option>";
                echo "'<option value='1'>status2</option>";
                echo '</select>';
                echo '</td>';
                echo '</tr>';
            }
            ?>
        </table>
    </body>
</html>

Thanks for help!

Upvotes: 0

Views: 6686

Answers (3)

iCreateAwesome
iCreateAwesome

Reputation: 4464

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 

<?php
            for ($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     
           }
         });
    });
});

Upvotes: 1

Samich
Samich

Reputation: 30095

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)
});

Upvotes: 1

eltuza
eltuza

Reputation: 84

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
});

Upvotes: 0

Related Questions