Подсветка динамически генерируемой таблицы mysql на основе выделения пользователем и постоянного хранения информации

Question

У меня есть таблица с опцией выделения в каждой строке. Таблица генерируется динамически из данных MySQL. В настоящее время, когда пользователь выбирает цвет из выпадающего меню, цвет строки изменяется. У каждого ряда есть свой выпадающий список. У меня вопрос, как я могу сохранить эту информацию CSS в моей базе данных, чтобы в следующий раз, когда пользователь заходит на сайт, таблица уже выделена? Вот код, который я использую для изменения цвета строки таблицы при использовании раскрывающегося списка

<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>

Строки таблицы генерируются динамически с использованием запроса ajax. Я знаю, что текст можно легко сделать динамичным и обновленным, но я пытаюсь найти способ изменить лист php или css, который может хранить информацию. Я не уверен, как, поскольку выбранная строка здесь изменяется, и у каждой строки есть свой собственный выпадающий список.

Вот код, который я использую для генерации каждой строки таблицы.

$(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

Answer 1

ПРОСТО, чтобы вы начали.Код может содержать ошибки.ЧАСТЬ 1 SQL ДОБАВЬТЕ НОВУЮ КОЛОННУ

//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;

Часть 2: АНОМНАЯ ФУНКЦИЯ JAVASCRIPT

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

Часть 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 );