Agfdhyk

I have a table with a highlight option on each row. The table is generated dynamically from mysql data. Currently, when a user selects a color from a drop down menu, the color of the row changes. Each row has its own drop down. My question is, how can I store this css information in my database so the next time a user accesses the site the table is already highlighted? Here is the code I use to change the color of the table row when using the drop down

<script>

    $(document).ready(function () {

        $(document).on('click', 'tr', function () {

            var color = ['none', 'green', 'yellow', 'red'];

            $('select').change(function() {

                $(this).parents('tr').css('background', color[$(':selected', this).index()]);

            });

        });

    });

    </script>

The table rows are generated dynamically using an ajax request. I know text can easily be made dynamic and updated but I am trying to find a way to modify a php or css sheet that can store the info. I am not sure how as the selected row here changes and each row has its own drop down.

Here is the code I use for generating each table row.

$(document).ready(function($)

{    

    function create_html_table (tbl_data)

    {



        //--->create data table > start

        var tbl = '';

        tbl +='<table>'



            //--->create table header > start

            tbl +='<thead>';

                tbl +='<tr>';

                tbl +='<th></th>';

                tbl +='<th></th>';

                tbl +='<th></th>';

                tbl +='<th></th>';



                tbl +='</tr>';

            tbl +='</thead>';







            tbl +='<tbody>';



                $.each(tbl_data, function(index, val) 

                {

                    var row_id = val['row_id'];



                    tbl +='<tr row_id="'+row_id+'">';

                        tbl +='<td><select name="Select1"><option></option><option>Red</option><option>Yellow</option><option>Green</option></select></td>'

                        tbl +='<td ><div>'+val['']+'</div></td>';

                        tbl +='<td ><div>'+val['']+'</div></td>';

                        tbl +='<td ><div>'+val['']+'</div></td>';







            tbl +='</tbody>';



        tbl +='</table>';





        //out put table data

        $(document).find('.tbl_user_data').html(tbl);







    }





    var ajax_url = "<?php echo APPURL;?>/ajax.php" ;

    var ajax_data = <?php echo json_encode($q1);?>;



    //create table on page load

    //create_html_table(ajax_data);



    //--->create table via ajax call > start

    $.getJSON(ajax_url,{call_type:'get'},function(data) 

    {

        create_html_table(data);

    });

    //--->create table via ajax call > end

JUST to get you started. Code may contain errors.
PART 1 SQL ADD NEW COLUMN

//SQL CREATE A COLUMN DEFAULT COLOR

//REPLACE MYTABLE with your table name

//REPLACE DBNAME with your databasename

//REPALCE default_color with your favourite column name

//YOU can also use uuid on your rows as unique key

//EXECUTE THIS SQL



ALTER TABLE `mytable` ADD COLUMN `default_color` VARCHAR(65) NULL DEFAULT NULL;

Part 2: JAVASCRIPT ANONYMOUS FUNCTION

var dy_tb_cr;



(function(){



    'use strict';

    var DYNAMIC_TABLE = function(){

        dy_tb_cr = this;

    };





    DYNAMIC_TABLE.prototype.change = function( row_id, color ){

        var data = 'color='+encodeURIComponent(color);

            data += '&row_id=' encodeURIComponent(row_id);



            this.xhr(data);

    };



    DYNAMIC_TABLE.prototype.xhr = function(data){

        var url = 'update_row_color.php';

        var xhr = new XMLHTTPRequest();

        xhr.open( 'POST', url, true );

        xhr.setRequestHeader( 'content-type', 'application/www-formdata-urlencoded' );

        xhr.send();



    };



    new DYNAMIC_TABLE;



}());





//JS Usage Example

dy_tb_cr.change( 12, 'yellow' );

Part 3: PHP

//change_color.php

//Will



// get from post form







$row = filter_input( INPUT_POST, 'row_id' );

$color = filter_input( INPUT_POST, 'color' );



//PHP PART, HAS TO BE AN FILE

//SQL

//USING PDO ( MY FAVOURITE )

//YOU CAN USE YOUR FAVOURITE METHOD TO CHANGE

// UPDATE `MYTABLE` SET `default_color` = :color WHERE `id` = :id

$dsn = 'Mysql:host=127.0.0.1; port=3306; dbname = MYTABLE';



$sql = 'UPDATE `MYTABLE` SET `default_color` = :color WHERE `id` = :id';

$values = array( ':color' => $color, ':iid' => $row );

$pdo = new PDO( $dsn, $usr, $name );

$statement = $pdo->prepare( $sql );

$statement->execute( $values );